useQuery hook in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useQuery hook from Apollo Client.

GraphQL

import { [1] } from '@apollo/client';

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

AuseState

BuseQuery

CuseMutation

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useMutation instead of useQuery

Using React hooks like useState by mistake

The useQuery hook is imported from '@apollo/client' to run GraphQL queries in React components.

2fill in blank

medium

Complete the code to define a GraphQL query named GET_USERS.

GraphQL

const GET_USERS = gql`query [1] { users { id name } }`;

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

AFetchUsers

BgetUsers

CGetUsers

Dusers

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase query names

Using the field name as the query name

The query name should be a valid GraphQL identifier, typically PascalCase like GetUsers.

3fill in blank

hard

Fix the error in the useQuery hook call by filling the blank.

GraphQL

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

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

AGET_USERS

BGET_USERS()

CgetUsers

Dquery GET_USERS

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the query as a function with parentheses

Passing a string instead of the query document

The useQuery hook expects the query document, not a function call or string. So pass GET_USERS without parentheses.

4fill in blank

hard

Fill both blanks to destructure loading and error from useQuery and check if loading is true.

GraphQL

const { [1], [2] } = useQuery(GET_USERS);
if ([1]) {
  return <p>Loading...</p>;
}

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

Aloading

Berror

Cdata

Dfetching

Attempts:

3 left

💡 Hint

Common Mistakes

Using data instead of loading to check loading state

Not destructuring error when needed

We destructure loading and error from the useQuery result. Then check if loading is true to show a loading message.

5fill in blank

hard

Fill all three blanks to render user names from data returned by useQuery.

GraphQL

return (
  <ul>
    {data?.users?.map(({ [1], [2] }) => (
      <li key=[1]>{ [2] }</li>
    ))}
  </ul>
);

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

Aid

Bname

Cuser

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using name as key instead of id

Not destructuring both id and name

We destructure id and name from each user object. The id is used as the key, and name is displayed inside the list item.

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