Now that we have our React and TypeScript project in place, let's make a GraphQL query using axios:

1. In Header.tsx, we'll start by creating two interfaces for the GraphQL query response and the viewer data within it:

interface IViewer {
  name: string;
  avatarUrl: string;
}

interface IQueryResult {
  data: {
    viewer: IViewer;
  };
}

2. Let's create some state within our Header component for the viewer:

const [viewer, setViewer]: [
  IViewer,
  (viewer: IViewer) => void
] = React.useState({name: "", avatarUrl: ""});

3. It's nearly time to make the GraphQL query. We are going to do this when the component has just been mounted. We can use the useEffect function to do this:

React.useEffect(() => {
  // TODO - make a GraphQL query 
}, []);

We pass an empty array as the second parameter so that the query only executes when the component is mounted and not on each render.

4. Let's use axios then to make the GraphQL query:

React.useEffect(() => {
  axios
    .post<IQueryResult>(
      "https://api.github.com/graphql",
      {
        query: `query { 
          viewer { 
            name
            avatarUrl
          }
        }`
      }
    )
}, []);

Notice that we are doing an HTTP POST even though we are reading data. GraphQL requires us to use an HTTP POST because the details of the query are in the request body.

We are also using the interface we used earlier, IQueryResult, for the response data.

5. As mentioned earlier, we need to pass our bearer token in the HTTP Authorization header. So, let's do that:

axios
  .post<IQueryResult>(
    "https://api.github.com/graphql",
    {
      query: `query { 
        viewer { 
          name
          avatarUrl
        }
      }`
    },
    {
      headers: {
        Authorization: "bearer our-bearer-token"
      }
    }
  )

Obviously, we need to substitute in our real bearer token that we obtained earlier from GitHub.

6. We aren't handling the response yet, so let's do that and set the viewer state variable:

axios
  .post<IQueryResult>(
    ...
  )
  .then(response => {

    setViewer(response.data.data.viewer);
  });

7. Now that we have the data in state from the GraphQL query, let's render our avatar and name along with our app title:

return (
  <div>
    <img src={viewer.avatarUrl} className="avatar" />
    <div className="viewer">{viewer.name}</div>
    <h1>GitHub Search</h1>
  </div>
);

8. Let's add the avatar CSS class we just referenced into App.css:

.avatar {
  width: 60px;
  border-radius: 50%;
}

If we look at the running app, we should see our avatar and name in our app header:

So, we've just interacted with a GraphQL server using an HTTP library. All GraphQL requests are made using the HTTP POST method, even for reading data. All GraphQL requests are made to the same endpoint as well. The resource we want data from isn't in the URL, it's in the request body. So, whilst we can use an HTTP library, like axios, for querying GraphQL servers, it feels a little strange.

In the next section, we'll look at a GraphQL client that will help us query a GraphQL server in a more natural way.