Why client libraries simplify usage in GraphQL - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data using a client library.

GraphQL

const result = await client.[1]({ query: GET_USERS });

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

Aquery

Bfetch

Csend

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' which is a browser API, not a client library method.

Using 'send' or 'request' which are not standard GraphQL client methods.

The query method is used in GraphQL client libraries to fetch data by sending a query to the server.

2fill in blank

medium

Complete the code to handle errors from the client library response.

GraphQL

if (result.[1]) { console.error(result.errors); }

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

Afailures

Berror

Cerrors

Dissues

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' which is singular and not the standard property.

Using 'failures' or 'issues' which are not valid properties.

The errors property contains any errors returned by the GraphQL server in the response.

3fill in blank

hard

Fix the error in the code to correctly extract data from the response.

GraphQL

const users = result.data.[1];

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

Ausers

Buser_data

CuserList

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'userList' or 'user_data' which do not match the query field.

Using 'data' which is the parent object, not the data field.

The users field matches the GraphQL query's root field name and contains the requested data.

4fill in blank

hard

Fill both blanks to create a mutation call with variables.

GraphQL

const response = await client.[1]({ mutation: CREATE_USER, variables: [2] });

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

Amutate

B{ name: 'Alice' }

C{ id: 1 }

Dquery

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'query' instead of 'mutate' for mutations.

Passing variables with wrong keys or formats.

The mutate method is used to send mutations. Variables are passed as an object with the required fields.

5fill in blank

hard

Fill all three blanks to destructure data from the response.

GraphQL

const { [1]: { [2] } } = await client.[3]({ query: GET_POSTS });

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

Adata

Bposts

Cquery

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'result' instead of 'data' for destructuring.

Using 'mutate' instead of 'query' for fetching data.

We destructure the data property, then the posts field inside it. The method used to fetch is query.