Apollo Client setup in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of Apollo Client in a web application?

Choose the best description of what Apollo Client does in a web app.

A It is a database server that stores GraphQL schemas and data permanently.

B It manages local and remote data with GraphQL queries and caches results for efficient updates.

C It is a UI framework for building React components with built-in styling.

D It is a tool to convert SQL queries into GraphQL automatically.

💡 Hint

Think about how Apollo Client helps with data fetching and caching.

Apollo Client is a library that helps apps fetch data from GraphQL servers and cache it locally to improve performance and user experience.

❓ query_result

intermediate

What will be the value of data after this Apollo Client query?

Given the following GraphQL query and response, what will data contain?

GraphQL

const GET_USER = gql`query { user(id: "1") { id name } }`;
const { data } = useQuery(GET_USER);
// Server response: { "data": { "user": { "id": "1", "name": "Alice" } } }

A {"data": {"user": {"id": "1", "name": "Alice"}}}

B {"id": "1", "name": "Alice"}

C {"user": {"id": "1", "name": "Alice"}}

D null

💡 Hint

Remember how Apollo Client unwraps the server response inside data.

The data object contains the fields requested in the query, here the user object with id and name.

📝 Syntax

advanced

Which Apollo Client setup code snippet correctly creates a client with an HTTP link and cache?

Choose the code that correctly initializes Apollo Client with an HTTP link to https://api.example.com/graphql and an in-memory cache.

A

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),
  cache: new InMemoryCache()
});

B

import { ApolloClient, HttpLink } from '@apollo/client';
const client = new ApolloClient({
  link: 'https://api.example.com/graphql',
  cache: new HttpLink()
});

C

import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

D

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
const client = new ApolloClient({
  httpLink: new HttpLink({ uri: 'https://api.example.com/graphql' }),
  cache: new InMemoryCache()
});

💡 Hint

Check the correct property names and object types for Apollo Client options.

The link property must be set to an instance of HttpLink. The cache must be an instance of InMemoryCache. Option A follows this correctly.

❓ optimization

advanced

How can you optimize Apollo Client to reduce unnecessary network requests?

Which option correctly describes a way to optimize Apollo Client to avoid fetching data repeatedly from the server?

A Use <code>pollInterval</code> with a very low value to fetch data continuously.

B Disable caching completely to always get fresh data from the server.

C Set <code>fetchPolicy: 'network-only'</code> to always fetch from the server.

D Use <code>fetchPolicy: 'cache-first'</code> in queries to check cache before network requests.

💡 Hint

Think about how Apollo Client caching policies affect network usage.

The cache-first policy makes Apollo Client check the cache first and only fetch from the network if data is missing, reducing unnecessary requests.

🔧 Debug

expert

Why does this Apollo Client query throw an error: 'Cannot read property "user" of undefined'?

Consider this React component using Apollo Client:

const GET_USER = gql`query { user(id: "1") { id name } }`;
function User() {
  const { data } = useQuery(GET_USER);
  return <div>{data.user.name}</div>;
}

What is the cause of the error?

A The component tries to access <code>data.user</code> before <code>data</code> is loaded, causing <code>data</code> to be undefined initially.

B The GraphQL query is missing required fields, so <code>user</code> is undefined.

C Apollo Client does not support queries inside React components.

D The <code>useQuery</code> hook must be called outside the component.

💡 Hint

Think about the loading state of Apollo Client queries.

When the component first renders, data is undefined because the query is still loading. Accessing data.user causes an error. The component should check if data exists before accessing its properties.

Practice

1. What is the main purpose of Apollo Client in a GraphQL application?

easy

A. To connect your app to a GraphQL server and manage data

B. To create a new GraphQL server

C. To style your app's user interface

D. To store data permanently on the server

Solution

1. Step 1: Understand Apollo Client's role

   Apollo Client is designed to connect your app to a GraphQL server and handle data fetching and caching.

2. Step 2: Differentiate from other roles

   Creating servers or styling UI are not responsibilities of Apollo Client.

3. Final Answer:

   To connect your app to a GraphQL server and manage data -> Option A

4. Quick Check:

   Apollo Client = Connect and manage data [OK]

Hint: Apollo Client connects app to server and manages data [OK]

Common Mistakes:

• Confusing Apollo Client with server creation tools
• Thinking Apollo Client styles the UI
• Assuming Apollo Client stores data permanently on server

2. Which of the following is the correct way to create an Apollo Client instance with a server URL 'https://api.example.com/graphql'?

easy

A. const client = new ApolloClient({ endpoint: 'https://api.example.com/graphql' });

B. const client = ApolloClient({ url: 'https://api.example.com/graphql', cache: new Cache() });

C. const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() });

D. const client = new ApolloClient('https://api.example.com/graphql');

Solution

1. Step 1: Check Apollo Client constructor syntax

   The correct syntax uses 'new ApolloClient' with an object containing 'uri' and 'cache' properties.

2. Step 2: Verify property names and cache setup

   The property for the server URL is 'uri', and the cache should be an instance of 'InMemoryCache'.

3. Final Answer:

   const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); -> Option C

4. Quick Check:

   Use 'uri' and 'InMemoryCache' in ApolloClient setup [OK]

Hint: Use 'uri' and 'new InMemoryCache()' when creating Apollo Client [OK]

Common Mistakes:

• Using 'url' or 'endpoint' instead of 'uri'
• Not using 'new' keyword with ApolloClient
• Omitting the cache property or using wrong cache class

3. Given this Apollo Client setup code, what will console.log(client.cache.extract()) output immediately after creation?

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});
console.log(client.cache.extract());

medium

A. A string with the server URL

B. null

C. An error because cache is not initialized

D. {} (an empty object)

Solution

1. Step 1: Understand InMemoryCache initial state

   When a new InMemoryCache is created, it starts empty with no stored data.

2. Step 2: Check what extract() returns

   The extract() method returns the current cache contents as an object. Since no queries ran yet, it returns an empty object {}.

3. Final Answer:

   {} (an empty object) -> Option D

4. Quick Check:

   New cache extract() = empty object {} [OK]

Hint: New cache is empty; extract() returns {} [OK]

Common Mistakes:

• Expecting data before any query runs
• Thinking extract() returns null or error
• Confusing cache contents with server URL

4. Identify the error in this Apollo Client setup code:

const client = new ApolloClient({
  url: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
});

medium

A. Missing 'new' keyword before InMemoryCache

B. Property 'url' should be 'uri'

C. ApolloClient should not be called with 'new'

D. Cache property should be a string, not an object

Solution

1. Step 1: Check property names in Apollo Client config

   The correct property for the server address is 'uri', not 'url'.

2. Step 2: Verify cache instantiation

   The cache is properly instantiated as new InMemoryCache(). The primary error is the incorrect property name.

3. Final Answer:

   Property 'url' should be 'uri' -> Option B

4. Quick Check:

   Use 'uri' property for server URL [OK]

Hint: Use 'uri' not 'url' for server address in Apollo Client [OK]

Common Mistakes:

• Using 'url' instead of 'uri'
• Forgetting 'new' before InMemoryCache()
• Thinking ApolloClient is called without 'new'

5. You want to set up Apollo Client to connect to a GraphQL server and cache data efficiently. Which of the following code snippets correctly sets up the client and explains why this setup is best for performance?

hard

A. const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); // Efficient caching and server connection

B. const client = new ApolloClient({ uri: 'https://api.example.com/graphql' }); // No cache used, faster queries

C. const client = new ApolloClient({ cache: new InMemoryCache() }); // No server URI, so no connection

D. const client = ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); // Missing 'new' keyword

Solution

1. Step 1: Confirm correct Apollo Client instantiation

   const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); // Efficient caching and server connection uses 'new ApolloClient' with both 'uri' and 'cache' properly set, which is required for connection and caching.

2. Step 2: Understand why caching improves performance

   Using 'InMemoryCache' stores query results locally, reducing network requests and speeding up data access.

3. Final Answer:

   const client = new ApolloClient({ uri: 'https://api.example.com/graphql', cache: new InMemoryCache() }); // Efficient caching and server connection -> Option A

4. Quick Check:

   Use 'new ApolloClient' with 'uri' and 'InMemoryCache' for best performance [OK]

Hint: Always use 'new ApolloClient' with 'uri' and 'InMemoryCache' [OK]

Common Mistakes:

• Omitting cache reduces performance
• Missing 'new' causes errors
• Not specifying server URI prevents connection