Refetching and polling in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable polling every 5 seconds in a GraphQL query.

GraphQL

const { data, loading, error } = useQuery(GET_USERS, { pollInterval: [1] });

Drag options to blanks, or click blank then click option'

A1000

B5

C5000

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 5 instead of 5000 for pollInterval.

Setting pollInterval to 0 which disables polling.

The pollInterval option expects milliseconds. To poll every 5 seconds, use 5000.

2fill in blank

medium

Complete the code to manually refetch data using the refetch function from useQuery.

GraphQL

const { data, loading, error, [1] } = useQuery(GET_POSTS);

<button onClick={() => [1]()}>Refresh</button>

Drag options to blanks, or click blank then click option'

Arefetch

BfetchMore

CupdateQuery

DsubscribeToMore

Attempts:

3 left

💡 Hint

Common Mistakes

Using fetchMore which loads more data but does not refetch.

Using subscribeToMore which is for subscriptions.

The refetch function allows you to manually reload the query data.

3fill in blank

hard

Fix the error in the polling setup by completing the missing option key.

GraphQL

const { data, loading, error } = useQuery(GET_COMMENTS, { [1]: 3000 });

Drag options to blanks, or click blank then click option'

ApollInterval

Binterval

Cpolling

DrefreshRate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'interval' or 'polling' which are not valid option keys.

Using 'refreshRate' which is not recognized.

The correct option key to enable polling is pollInterval.

4fill in blank

hard

Fill both blanks to set up a query with polling and manual refetch.

GraphQL

const { data, loading, error, [1] } = useQuery(GET_MESSAGES, { [2]: 10000 });

<button onClick={() => [1]()}>Reload</button>

Drag options to blanks, or click blank then click option'

Arefetch

BpollInterval

CfetchMore

DsubscribeToMore

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing fetchMore with refetch.

Using wrong option keys for polling.

Use refetch to manually reload data and pollInterval to set polling every 10 seconds.

5fill in blank

hard

Fill all three blanks to create a query that polls every 15 seconds, allows manual refetch, and handles loading state.

GraphQL

const { data, [1], error, [2] } = useQuery(GET_NOTIFICATIONS, { [3]: 15000 });

if ([1]) return <p>Loading...</p>;

<button onClick={() => [2]()}>Update</button>

Drag options to blanks, or click blank then click option'

Aloading

Brefetch

CpollInterval

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up loading and error variables.

Using wrong option keys for polling.

loading shows the loading state, refetch reloads data manually, and pollInterval sets polling every 15 seconds.