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.