Apollo Client setup in GraphQL - Step-by-Step Execution

Concept Flow - Apollo Client setup

Import ApolloClient, InMemoryCache

↓

Create ApolloClient instance

↓

Set URI for GraphQL server

↓

Configure cache with InMemoryCache

↓

Export or use client in app

↓

Use client to send queries/mutations

This flow shows how to set up Apollo Client step-by-step to connect to a GraphQL server and prepare it for queries.

Execution Sample

GraphQL

import { ApolloClient, InMemoryCache } from '@apollo/client';

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

This code creates an Apollo Client instance connected to a GraphQL endpoint with caching enabled.

Execution Table

Step	Action	Details	Result
1	Import ApolloClient and InMemoryCache	Load required classes from @apollo/client	Classes ready to use
2	Create ApolloClient instance	Call new ApolloClient with config object	Client object created
3	Set URI	Assign 'https://example.com/graphql' as server endpoint	Client knows server address
4	Configure cache	Use new InMemoryCache() for caching	Client has cache setup
5	Client ready	Client instance fully configured	Ready to send queries and mutations
6	Exit	Setup complete	Apollo Client setup finished

💡 Setup ends after client instance is fully configured and ready

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
ApolloClient	undefined	Class imported	Class imported	Class imported
InMemoryCache	undefined	Class imported	Class imported	Class imported
client	undefined	Instance created (fully configured)	Instance created (fully configured)	Instance created (fully configured)
uri	undefined	Set to 'https://example.com/graphql'	Set to 'https://example.com/graphql'	Set to 'https://example.com/graphql'
cache	undefined	Instance of InMemoryCache	Instance of InMemoryCache	Instance of InMemoryCache

Key Moments - 2 Insights

Why do we need to import both ApolloClient and InMemoryCache?

ApolloClient is the main class to create the client, while InMemoryCache is needed to handle caching of query results. Both are required to set up the client properly as shown in steps 1 and 4 of the execution_table.

What happens if the URI is not set correctly?

If the URI is missing or incorrect (step 3), the client won't know where to send queries, so requests will fail. The execution_table shows the URI is set before the client is ready.

Visual Quiz - 3 Questions

Look at the execution_table, what is the client variable value after step 4?

A Instance created with cache configured

B Undefined

C Class imported but not instantiated

D Instance created without cache

💡 Hint

Check the 'client' row in variable_tracker after step 4

At which step does the client know the GraphQL server address?

A Step 1

B Step 3

C Step 5

D Step 2

💡 Hint

Look at the 'Set URI' action in execution_table

If we skip importing InMemoryCache, what will happen?

A Client will still work without cache

B URI will not be set

C Client creation will fail or cache will be undefined

D ApolloClient class will not be imported

💡 Hint

Refer to key_moments about why both imports are needed and execution_table step 4

Concept Snapshot

Apollo Client setup:
1. Import ApolloClient and InMemoryCache from '@apollo/client'.
2. Create a new ApolloClient instance.
3. Set the 'uri' to your GraphQL server endpoint.
4. Configure caching with new InMemoryCache().
5. Use the client to send queries and mutations.

Full Transcript

To set up Apollo Client, first import ApolloClient and InMemoryCache from the Apollo library. Then create a new ApolloClient instance, providing a configuration object. This object must include the 'uri' property with the GraphQL server URL and a 'cache' property set to a new InMemoryCache instance. After these steps, the client is ready to send queries and mutations to the server. The execution flow starts with imports, then client creation, setting the URI, configuring cache, and finally the client is ready. Variables like 'client', 'uri', and 'cache' change state as the setup progresses. Common confusions include why both imports are needed and the importance of setting the URI correctly. The visual quiz tests understanding of these steps and variable states.

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