useQuery hook in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What does this useQuery hook return?

Given the following React component using useQuery from Apollo Client, what will be the value of data after the query completes successfully?

GraphQL

import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

function UsersList() {
  const { loading, error, data } = useQuery(GET_USERS);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  return data;
}

A undefined

B {"users":[{"id":"1","name":"Alice"},{"id":"2","name":"Bob"}]}

C null

D {"users":[]}

💡 Hint

Think about what the data object contains after a successful query.

The useQuery hook returns an object where data holds the result of the GraphQL query. After success, data contains the queried fields, here the list of users.

📝 Syntax

intermediate

Identify the correct syntax in this useQuery usage

Which option contains correct syntax when using useQuery?

GraphQL

const { loading, error, data } = useQuery(GET_POSTS, { variables: { id: 1 } });

A const { loading, error, data } = useQuery(GET_POSTS, variables: { id: 1 });

B const { loading, error, data } = useQuery(GET_POSTS, { variables: { id = 1 } });

C const { loading, error, data } = useQuery(GET_POSTS, { variables: id: 1 });

D const { loading, error, data } = useQuery(GET_POSTS, { variables: { id: 1 } });

💡 Hint

Check the syntax of the options object passed to useQuery.

The options object must be wrapped in curly braces with key-value pairs. Option D correctly wraps variables in an object. Other options have syntax errors like missing braces or wrong assignment.

❓ optimization

advanced

How to prevent unnecessary re-fetching with useQuery?

You want to avoid re-fetching data when the component re-renders but the variables haven't changed. Which option correctly achieves this?

A Use <code>useQuery(GET_DATA, { fetchPolicy: 'no-cache' })</code>

B Use <code>useQuery(GET_DATA, { fetchPolicy: 'network-only' })</code>

C Use <code>useQuery(GET_DATA, { fetchPolicy: 'cache-first' })</code>

D Use <code>useQuery(GET_DATA, { fetchPolicy: 'cache-and-network' })</code>

💡 Hint

Think about which fetch policy uses cached data first to avoid network calls.

The cache-first policy returns cached data if available and only fetches from the network if not cached, preventing unnecessary network requests on re-renders.

🔧 Debug

advanced

Why does this useQuery hook cause an infinite loop?

Consider this React component:

function MyComponent() {
  const { data } = useQuery(GET_ITEMS, { variables: { filter: getFilter() } });
  return <div>{data?.items.length}</div>;
}

function getFilter() {
  return { active: true };
}

Why does this cause an infinite loop of queries?

A Because <code>getFilter()</code> returns a new object every render, changing variables and triggering re-fetch.

B Because <code>data</code> is undefined initially causing re-render.

C Because <code>useQuery</code> does not accept functions in variables.

D Because <code>filter</code> is missing a required field.

💡 Hint

Think about how React compares objects in dependencies.

Each render calls getFilter() which returns a new object reference. This makes variables change every time, causing useQuery to re-fetch endlessly.

🧠 Conceptual

expert

What is the role of the 'loading' property in useQuery?

In the useQuery hook, what does the loading property indicate?

A <code>loading</code> is true while the query is in progress and false once it completes or errors.

B <code>loading</code> is true only if the query has an error.

C <code>loading</code> is true after the query completes successfully.

D <code>loading</code> is always false unless manually set.

💡 Hint

Consider the lifecycle of a query request.

The loading flag is true while the query is fetching data. It becomes false when the data is received or an error occurs.