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.