Search⌘ K
AI Features
Home
Courses
Integrating Apollo Client with React Applications

Getting Lazy

Explore how to use lazy queries in React applications with Apollo Client. Understand the difference between automatic and lazy query execution, implement a search feature using lazy queries, and handle dynamic data loading efficiently with debouncing techniques.

We'll cover the following...

The generated useAllBooksLazyQuery function

GraphQL Code Generator created a function named useAllBooksLazyQuery in our src/generated/graphql.tsx file.

export function useAllBooksLazyQuery(
    baseOptions?: Apollo.LazyQueryHookOptions<AllBooksQuery, AllBooksQueryVariables>
) {
    const options = {...defaultOptions, ...baseOptions}
    return Apollo.useLazyQuery<AllBooksQuery, AllBooksQueryVariables>(AllBooksDocument, options);
}
useAllBooksLazyQuery function generated using GraphQL Code Generator

This function looks a lot like useAllBooksQuery, but it uses the word “lazy” a few times. In this lesson, we’ll explore the difference between the useAllBooksQuery and the useAllBooksLazyQuery functions. We will use a function like useAllBooksLazyQuery to search for books that contain a specific word or two in their title.

Here is what we will have by the end of this lesson.

Working with lazy queries

To find all books, we use the books field. But to find books by a title, the GraphQL server uses a different field called booksWithTitle, as shown in the code snippet below:

query {
    booksWithTitle(title: "React") {
        title
    }
}

To use this new query in our client, we will remove the allBooksQuery from the components/Books/index.tsx ...