Apollo Client setup in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the ApolloClient class.

GraphQL

import { [1] } from '@apollo/client';

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

AApolloClient

BReact

CGraphQL

DuseQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Importing React instead of ApolloClient.

Using useQuery which is for queries, not client setup.

The ApolloClient class is imported from '@apollo/client' to create a new client instance.

2fill in blank

medium

Complete the code to set the URI for the Apollo Client.

GraphQL

const client = new ApolloClient({ uri: '[1]' });

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

Alocalhost

Bgraphql

Chttp://localhost:4000/graphql

Dhttp://api

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'localhost' without protocol or path.

Missing the '/graphql' path.

The URI must be the full URL to the GraphQL server endpoint, usually ending with '/graphql'.

3fill in blank

hard

Fix the error in the code to create the Apollo Client with cache.

GraphQL

const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache: new [1]() });

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

AHttpLink

BInMemoryCache

CApolloProvider

DGraphQLClient

Attempts:

3 left

💡 Hint

Common Mistakes

Using HttpLink instead of cache.

Using ApolloProvider which is a React component.

The cache must be an instance of InMemoryCache to store query results.

4fill in blank

hard

Fill both blanks to import and use ApolloProvider in React.

GraphQL

import { ApolloClient, [1] } from '@apollo/client';

function App() {
  return (
    <[2] client={client}>
      {/* Your app components */}
    </[2]>
  );
}

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

AApolloProvider

BuseQuery

DQuery

Attempts:

3 left

💡 Hint

Common Mistakes

Using useQuery instead of ApolloProvider.

Not wrapping the app with ApolloProvider.

ApolloProvider is imported and used to wrap the React app to provide the Apollo Client instance.

5fill in blank

hard

Fill all three blanks to create a complete Apollo Client setup with cache and provider.

GraphQL

import { ApolloClient, [1], [2] } from '@apollo/client';

const client = new ApolloClient({
  uri: '[3]',
  cache: new InMemoryCache()
});

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

AInMemoryCache

BApolloProvider

CHttpLink

DApolloClient

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing HttpLink with InMemoryCache.

Not importing ApolloProvider when using React.

InMemoryCache and ApolloProvider are imported along with ApolloClient. The URI is set as the HttpLink string.

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