Writing a simple component

The UserList component will be implemented in the src/components/UserList.js file. We start by importing the necessary tools:

import { useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'

Then, we define the query that we need to use to retrieve the data we need for this component:

const GET_USERS = gql`
  query Users {
    User {
      login
      email
      total_contributions
    }
  }
`

After this, we can create the component using function notation. The function has to return the HTML code that will be displayed in the browser.

Before that, however, we need to fetch the data. This is where the useQuery function from Apollo is used. Let's start with a simple implementation where we will just log the results of the useQuery function in the console and return an empty string as HTML:

function UserList(props) {

  const { loading, data, error } = useQuery(GET_USERS);
  console.log("Loading=", loading);
  console...