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.