useQuery hook in GraphQL - Step-by-Step Execution

Concept Flow - useQuery hook

Component Renders

↓

useQuery Hook Called

↓

Send GraphQL Query Request

↓

Wait for Response

↓

Loading State True

↓

Display Loading

↓

Response Received

↓

Update Data & Loading State

↓

Component Re-renders with Data

The useQuery hook runs a GraphQL query when the component renders, manages loading state, and updates the component with the fetched data.

Execution Sample

GraphQL

const { loading, error, data } = useQuery(GET_USERS);

if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;

return <ul>{data.users.map(u => <li key={u.name}>{u.name}</li>)}</ul>;

This code fetches users with useQuery, shows loading or error messages, and displays user names when data arrives.

Execution Table

Step	Action	loading	error	data	Component Output
1	Component renders, useQuery called	true	null	null	'Loading...' displayed
2	GraphQL request sent	true	null	null	'Loading...' displayed
3	Response received with data	false	null	{users: [{name: 'Alice'}, {name: 'Bob'}]}	User list rendered
4	Component re-renders with data	false	null	{users: [{name: 'Alice'}, {name: 'Bob'}]}	<ul><li>Alice</li><li>Bob</li></ul>

💡 Loading becomes false and data is set, so component renders user list.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
loading	undefined	true	false	false
error	undefined	null	null	null
data	undefined	null	{users: [{name: 'Alice'}, {name: 'Bob'}]}	{users: [{name: 'Alice'}, {name: 'Bob'}]}

Key Moments - 3 Insights

Why does the component show 'Loading...' first before any data appears?

At Step 1 and 2 in the execution_table, loading is true and data is null, so the component returns the loading message until data arrives.

What happens if the GraphQL query fails?

If an error occurs, error becomes non-null and loading becomes false, so the component would display the error message instead of data, similar to Step 3 but with error set.

Why does the component re-render after data is received?

At Step 3, when data is set and loading is false, React triggers a re-render so the component can display the fetched data, as shown in Step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'loading' at Step 3?

A false

B null

C true

D undefined

💡 Hint

Check the 'loading' column in the execution_table at Step 3.

At which step does the component first display the user list?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look at the 'Component Output' column to see when the user list is rendered.

If the query returned an error, which variable would change from null to a value?

A loading

B data

C error

D Component Output

💡 Hint

Refer to the 'error' variable in the variable_tracker and key_moments about error handling.

Concept Snapshot

useQuery hook syntax:
const { loading, error, data } = useQuery(YOUR_QUERY);

- Runs query on component render
- loading true while fetching
- error set if query fails
- data holds fetched results

Use loading and error to show messages,
then render data when ready.

Full Transcript

The useQuery hook is called when a component renders. It sends a GraphQL query request and sets loading to true. While waiting, the component can show a loading message. When the response arrives, loading becomes false and data is set with the results. The component re-renders to display the data. If an error occurs, error is set and can be shown instead. This flow helps manage asynchronous data fetching in React components simply and clearly.