Apollo Client setup in GraphQL - Mini Project: Build & Apply

Apollo Client Setup

📖 Scenario: You are building a simple web app that fetches data from a GraphQL server. To do this, you need to set up Apollo Client, which helps your app talk to the GraphQL server easily.

🎯 Goal: Set up Apollo Client step-by-step to connect your app to a GraphQL endpoint and prepare it to fetch data.

📋 What You'll Learn

Create an Apollo Client instance with the correct URI

Set up an in-memory cache for Apollo Client

Configure Apollo Client with the cache and URI

Export the Apollo Client instance for use in the app

💡 Why This Matters

🌍 Real World

Apollo Client is widely used in web apps to connect to GraphQL servers, making data fetching easier and more efficient.

💼 Career

Knowing how to set up Apollo Client is essential for frontend developers working with GraphQL APIs in modern web development.

1

Import ApolloClient and InMemoryCache

Write the import statements to bring in ApolloClient and InMemoryCache from the @apollo/client package.

GraphQL

// Import ApolloClient and InMemoryCache from '@apollo/client'
// Your code here

Need a hint?

Use ES6 import syntax to import both ApolloClient and InMemoryCache from the @apollo/client package.

2

Create the Apollo Client URI variable

Create a constant variable called GRAPHQL_URI and set it to the string 'https://example.com/graphql' which is the GraphQL server endpoint.

GraphQL

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

// Create a constant GRAPHQL_URI with the value 'https://example.com/graphql'
// Your code here

Need a hint?

Use const to create a variable named GRAPHQL_URI and assign the exact URL string.

3

Initialize Apollo Client with URI and cache

Create a constant called client and assign it a new ApolloClient instance. Pass an object with two properties: uri set to GRAPHQL_URI and cache set to a new InMemoryCache().

GraphQL

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

const GRAPHQL_URI = 'https://example.com/graphql';

// Create Apollo Client instance named client with uri and cache
// Your code here

Need a hint?

Use the new keyword to create an ApolloClient object with the correct uri and cache properties.

4

Export the Apollo Client instance

Add a line to export the client constant as the default export of the module.

GraphQL

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

const GRAPHQL_URI = 'https://example.com/graphql';

const client = new ApolloClient({
  uri: GRAPHQL_URI,
  cache: new InMemoryCache()
});

// Export the client as default
// Your code here

Need a hint?

Use export default client; to make the Apollo Client instance available to other parts of your app.