Integrating Apollo Client with React Applications/

...

/

Writing GraphQL Queries

Writing GraphQL Queries

Learn how to write GraphQL queries for a React application.

We'll cover the following...

Changing the code files

At this point, we know that we have data in a GraphQL server. We also know that we can write a GraphQL query to get that data. We haven’t yet seen how to write a GraphQL query and execute it in the context of a component. That’s what we will be doing in this lesson.

Make a GraphQL query

Let’s start with how to write a GraphQL query. To accomplish this, we'll need to import a particular package that will allow us to write these queries in our components/Books/index.tsx file.

import { gql } from "graphql-tag";

Once this package has been imported, we can use it, as shown like in the code snippet below.

const allBooksQuery = gql`
    query allBooks {
        books {
            title
        }
    }
`;
A GraphQL query that enquires about the titles of all books

The variable allBooksQuery holds our ...