useQuery hook in GraphQL - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the primary purpose of the useQuery hook in GraphQL?

The useQuery hook is used to fetch data from a GraphQL server and manage the loading, error, and data states in a React component.

beginner

Which of these states does useQuery provide to handle the data fetching process?

It provides loading (true while fetching), error (if the request fails), and data (the fetched result) states.

intermediate

How do you pass variables to a GraphQL query using useQuery?

You pass variables as an object in the variables option inside the useQuery hook, like useQuery(QUERY, { variables: { id: 1 } }).

intermediate

What happens if the GraphQL query inside useQuery changes?

The useQuery hook automatically refetches the data to keep the UI updated with the latest query results.

beginner

Can useQuery be used to perform mutations or only queries?

useQuery is designed only for fetching data (queries). For mutations (data changes), you use the useMutation hook.

What does the loading state in useQuery indicate?

A The query is currently fetching data

B The query has finished successfully

C There was an error in the query

D The query has no data

The loading state is true while the query is fetching data from the server.

How do you provide variables to a GraphQL query using useQuery?

A Inside the query string directly

B By setting global variables

C Variables are not supported in <code>useQuery</code>

D Using the <code>variables</code> option in the hook call

Variables are passed as an object in the variables option when calling useQuery.

Which hook should you use to change data on the server?

A <code>useMutation</code>

B <code>useQuery</code>

C <code>useEffect</code>

D <code>useState</code>

useMutation is used to perform data changes on the server, not useQuery.

If the query inside useQuery changes, what happens?

A Nothing, data stays the same

B The hook refetches the data automatically

C The app crashes

D You must manually refetch

The useQuery hook automatically refetches data when the query or variables change.

What does the error state in useQuery represent?

A The query is loading

B The query returned no data

C There was a problem fetching data

D The query was successful

The error state holds information if the query failed to fetch data.

Explain how the useQuery hook works in a React component to fetch data from a GraphQL server.

Think about what happens when the component loads and how data is managed.

Describe the difference between useQuery and useMutation hooks in GraphQL.

One is for reading data, the other for writing data.

Practice

1. What does the useQuery hook in GraphQL primarily do inside a React component?

easy

A. Fetches data from a GraphQL server and provides loading and error states

B. Updates data on the GraphQL server

C. Deletes data from the GraphQL server

D. Creates a new GraphQL schema

Solution

1. Step 1: Understand the purpose of useQuery

   The useQuery hook is designed to run a GraphQL query and fetch data.

2. Step 2: Recognize the states it provides

   It also provides loading and error states to manage UI feedback during data fetching.

3. Final Answer:

   Fetches data from a GraphQL server and provides loading and error states -> Option A

4. Quick Check:

   useQuery fetches data = A [OK]

Hint: useQuery fetches data and manages loading/error states [OK]

Common Mistakes:

• Confusing useQuery with mutation hooks
• Thinking useQuery updates or deletes data
• Assuming useQuery creates schemas

2. Which of the following is the correct syntax to use the useQuery hook with a query named GET_USERS?

easy

A. useQuery(GET_USERS).then(response => ...);

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

C. const data = useQuery(GET_USERS);

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

Solution

1. Step 1: Recall the useQuery return structure

   The useQuery hook returns an object with data, loading, and error properties.

2. Step 2: Match the correct destructuring syntax

   const { data, loading, error } = useQuery(GET_USERS); correctly destructures these properties from the hook call.

3. Final Answer:

   const { data, loading, error } = useQuery(GET_USERS); -> Option B

4. Quick Check:

   Destructure data, loading, error = C [OK]

Hint: Destructure data, loading, error from useQuery call [OK]

Common Mistakes:

• Not destructuring loading state
• Using promises with useQuery (it's a hook)
• Passing loading as argument

3. Given this code snippet:

const { data, loading, error } = useQuery(GET_POSTS);
if (loading) return 'Loading...';
if (error) return 'Error!';
return data.posts.length;

What will be the output if data.posts contains 5 posts?

medium

A. 5

B. 'Error!'

C. undefined

D. 'Loading...'

Solution

1. Step 1: Check loading and error conditions

   The code returns 'Loading...' if loading is true and 'Error!' if error exists. Since data.posts has 5 posts, loading is false and error is null.

2. Step 2: Return the length of posts array

   With no loading or error, the code returns data.posts.length, which is 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   data.posts.length = 5 [OK]

Hint: Check loading/error first, then return data length [OK]

Common Mistakes:

• Ignoring loading state and expecting data immediately
• Confusing error with data
• Returning undefined if data is not checked

4. Identify the error in this code using useQuery:

const { data, loading, error } = useQuery(GET_COMMENTS);
if (loading) return ;
if (error) return 
Error occurred
;
return data.comments.map(c => <p>{c.text}</p>);

medium

A. The map function should use curly braces instead of parentheses

B. The component returns JSX before checking loading

C. The query name GET_COMMENTS is not imported

D. No error; code is correct

Solution

1. Step 1: Check for common mistakes in useQuery usage

   The code uses GET_COMMENTS but does not show it being imported or defined, which is required.

2. Step 2: Verify JSX and map usage

   The JSX and map syntax are correct; returning JSX conditionally is valid.

3. Final Answer:

   The query name GET_COMMENTS is not imported -> Option C

4. Quick Check:

   Missing query import = A [OK]

Hint: Always import your GraphQL queries before useQuery [OK]

Common Mistakes:

• Forgetting to import the query
• Returning JSX before loading check
• Incorrect map syntax for JSX

5. You want to fetch a list of users but only display them after the data is fully loaded. Which pattern correctly uses useQuery to achieve this?

hard

A. const { data } = useQuery(GET_USERS); if (!loading) return data.users.map(u => u.name); else return 'Loading...';

B. const { loading } = useQuery(GET_USERS); if (loading) return data.users; else return 'Loading...';

C. const { data } = useQuery(GET_USERS); return data.users.map(u => u.name);

D. const { data, loading } = useQuery(GET_USERS); if (loading) return 'Loading...'; return data.users.map(u => u.name);

Solution

1. Step 1: Understand loading state usage

   We must show 'Loading...' while data is loading, so check if loading is true first.

2. Step 2: Return user list only after loading is false

   const { data, loading } = useQuery(GET_USERS); if (loading) return 'Loading...'; return data.users.map(u => u.name); correctly returns 'Loading...' if loading is true, else maps over data.users.

3. Final Answer:

   const { data, loading } = useQuery(GET_USERS); if (loading) return 'Loading...'; return data.users.map(u => u.name); -> Option D

4. Quick Check:

   Check loading first, then return data = B [OK]

Hint: Always check loading before accessing data [OK]

Common Mistakes:

• Accessing data before loading is false
• Returning data when loading is true
• Ignoring loading state completely