Learn React with TypeScript 3

Using the query component to query GraphQL

We are now going to use the Query component to get our GitHub name and avatar, replacing the axios code:

1. Let's start by removing the axios import statement and instead of having the following imports:

import gql from "graphql-tag";import { Query } from "react-apollo";

2. Our IViewer interface will remain the same, but we need to tweak our IQueryResult interface slightly:

interface IQueryResult {  viewer: IViewer;}

3. We are going to define our GraphQL query next:

const GET_VIEWER = gql`  {    viewer {      name      avatarUrl    }  }`;

So, we set the query to a GET_VIEWER variable and we have defined our query in a template literal. However, the gql function just before the template literal is a little odd. Shouldn't ...