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.