Refetching and polling in GraphQL - Mini Project: Build & Apply

GraphQL Refetching and Polling

📖 Scenario: You are building a simple app that shows a list of books from a GraphQL API. You want to keep the list updated by refetching the data manually and also by polling the server every few seconds.

🎯 Goal: Create a GraphQL query to fetch books, set up a variable for polling interval, implement the polling logic, and add a manual refetch query.

📋 What You'll Learn

Create a GraphQL query named GET_BOOKS that fetches id and title of books

Create a variable pollInterval set to 5000 (milliseconds)

Use useQuery hook with pollInterval to fetch books repeatedly

Add a function refetchBooks to manually refetch the books

💡 Why This Matters

🌍 Real World

Many apps need to keep data fresh by polling or refetching, such as live sports scores, stock prices, or chat messages.

💼 Career

Understanding how to implement polling and refetching in GraphQL is important for frontend developers working with real-time or frequently updated data.

1

Create the GraphQL query

Create a GraphQL query called GET_BOOKS that fetches the id and title fields from books.

GraphQL

# Write the GraphQL query GET_BOOKS here
# Your code here

Need a hint?

Use the gql tag to define a query named GetBooks that requests id and title from books.

2

Set polling interval variable

Create a variable called pollInterval and set it to 5000 (milliseconds).

GraphQL

import { gql } from '@apollo/client';

export const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

// Define pollInterval variable
# Your code here

Need a hint?

Just create a variable named pollInterval and assign it the number 5000.

3

Use useQuery with polling

Use the useQuery hook with the GET_BOOKS query and set the pollInterval option to the variable pollInterval.

GraphQL

import { gql, useQuery } from '@apollo/client';

export const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

export const pollInterval = 5000;

// Use useQuery with pollInterval
# Your code here

Need a hint?

Call useQuery with GET_BOOKS and an options object that sets pollInterval to the variable pollInterval.

4

Add manual refetch function

Add a function called refetchBooks that calls the refetch method from the useQuery result to manually refresh the books data.

GraphQL

import { gql, useQuery } from '@apollo/client';

export const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

export const pollInterval = 5000;

export function useBooks() {
  const queryResult = useQuery(GET_BOOKS, { pollInterval });

  // Add refetchBooks function here
  # Your code here

  return queryResult;
}

Need a hint?

Create a function refetchBooks that calls queryResult.refetch() to manually reload the data.