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

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

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

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;
}

Hint

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

Practice

1. What is the main purpose of refetching in GraphQL?

easy

A. To manually update data by running the query again

B. To automatically update data at regular intervals

C. To cache data locally for faster access

D. To delete outdated data from the server

Solution

1. Step 1: Understand refetching concept

   Refetching means running the same query again to get fresh data when needed.

2. Step 2: Compare with polling

   Polling updates data automatically, but refetching is manual and on demand.

3. Final Answer:

   To manually update data by running the query again -> Option A

4. Quick Check:

   Refetching = manual update [OK]

Hint: Refetching means manual data update by rerunning query [OK]

Common Mistakes:

• Confusing refetching with automatic polling
• Thinking refetching caches data
• Assuming refetching deletes data

2. Which of the following is the correct way to enable polling every 5 seconds in a GraphQL query using Apollo Client?

easy

A. useQuery(MY_QUERY, { refetchInterval: 5000 })

B. useQuery(MY_QUERY, { refreshRate: 5 })

C. useQuery(MY_QUERY, { pollInterval: 5000 })

D. useQuery(MY_QUERY, { autoPoll: true, interval: 5000 })

Solution

1. Step 1: Recall Apollo Client polling syntax

   Polling is enabled by setting pollInterval in milliseconds.

2. Step 2: Check options for correctness

   Only useQuery(MY_QUERY, { pollInterval: 5000 }) uses the correct property pollInterval with 5000 ms (5 seconds).

3. Final Answer:

   useQuery(MY_QUERY, { pollInterval: 5000 }) -> Option C

4. Quick Check:

   pollInterval = 5000 ms [OK]

Hint: pollInterval sets polling time in ms in Apollo Client [OK]

Common Mistakes:

• Using wrong property names like refetchInterval
• Confusing seconds with milliseconds
• Assuming autoPoll is a valid option

3. Given this code snippet using Apollo Client:

const { data, loading, refetch } = useQuery(GET_USERS, { pollInterval: 10000 });
setTimeout(() => refetch(), 5000);

What will happen regarding data updates?

medium

A. Data updates every 10 seconds only

B. Data updates at 5 seconds and then every 10 seconds

C. Data updates every 5 seconds only

D. Data updates only once at 5 seconds

Solution

1. Step 1: Understand polling behavior

   Polling updates data automatically every 10 seconds as set by pollInterval.

2. Step 2: Understand manual refetch

   The setTimeout calls refetch() once after 5 seconds, triggering an immediate update.

3. Step 3: Combine effects

   So data updates at 5 seconds manually, then continues updating every 10 seconds automatically.

4. Final Answer:

   Data updates at 5 seconds and then every 10 seconds -> Option B

5. Quick Check:

   Manual refetch + polling = updates at 5s and every 10s [OK]

Hint: Manual refetch triggers immediate update, polling continues regularly [OK]

Common Mistakes:

• Ignoring manual refetch timing
• Assuming polling stops after manual refetch
• Confusing polling interval with refetch delay

4. You wrote this code to poll data every 3 seconds:

const { data, loading } = useQuery(GET_POSTS, { pollInterval: 3000 });

But data is not updating automatically. What is the likely cause?

medium

A. The component is unmounted or paused

B. The pollInterval value is too low

C. The query is missing a refetch call

D. Polling requires manual trigger each time

Solution

1. Step 1: Understand polling requirements

   Polling runs only when the component is mounted and active.

2. Step 2: Check common issues

   If data is not updating, the component might be unmounted or React Suspense is pausing it.

3. Step 3: Eliminate other options

   Polling does not need manual refetch, and 3000 ms is valid.

4. Final Answer:

   The component is unmounted or paused -> Option A

5. Quick Check:

   Polling requires active component [OK]

Hint: Polling only works if component is mounted and active [OK]

Common Mistakes:

• Thinking polling needs manual refetch
• Assuming pollInterval too low stops polling
• Ignoring component lifecycle

5. You want to keep a chat app's messages updated. You use polling every 15 seconds but also want users to refresh manually. Which approach best combines refetching and polling?

hard

A. Use polling with pollInterval: 15000 and disable manual refresh

B. Use only refetching triggered by a button every 15 seconds

C. Use refetching inside a setInterval instead of polling

D. Use polling with pollInterval: 15000 and add a button that calls refetch()

Solution

1. Step 1: Understand polling and manual refresh

   Polling updates data automatically every 15 seconds.

2. Step 2: Add manual refresh

   Adding a button that calls refetch() lets users update data on demand.

3. Step 3: Evaluate options

   Use polling with pollInterval: 15000 and add a button that calls refetch() combines both correctly; others either disable manual refresh or misuse refetching.

4. Final Answer:

   Use polling with pollInterval: 15000 and add a button that calls refetch() -> Option D

5. Quick Check:

   Polling + manual refetch button = best combo [OK]

Hint: Combine pollInterval with refetch button for best updates [OK]

Common Mistakes:

• Using only manual refetch without polling
• Disabling manual refresh when polling is active
• Replacing polling with setInterval refetch