Docs
Launch GraphOS Studio

Get started with Apollo Client


Hello! 👋 This short tutorial gets you up and running with Apollo Client.

For an introduction to the entire Apollo platform, check out Odyssey, Apollo's interactive learning platform.

Step 1: Setup

To start this tutorial, do one of the following:

  • Create a new React project locally with Vite, or
  • Create a new React sandbox on CodeSandbox.

Step 2: Install dependencies

Applications that use require two top-level dependencies:

  • @apollo/client: This single package contains virtually everything you need to set up . It includes the in-memory cache, local state management, error handling, and a React-based view layer.
  • graphql: This package provides logic for parsing queries.

Run the following command to install both of these packages:

npm install @apollo/client graphql

If you're using a React sandbox from CodeSandbox and you encounter a TypeError, try downgrading the version of the graphql package to 15.8.0 in the Dependencies panel. If you encounter a different error after downgrading, refresh the page.

Our example application will use the FlyBy GraphQL API from Apollo 's Voyage tutorial series. This API provides a list of intergalactic travel locations and details about those locations 👽

Step 3: Initialize ApolloClient

With our dependencies set up, we can now initialize an ApolloClient instance.

In main.jsx, let's first import the symbols we need from @apollo/client:

main.jsx
import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';

Next we'll initialize ApolloClient, passing its constructor a configuration object with the uri and cache :

main.jsx
const client = new ApolloClient({
uri: 'https://flyby-router-demo.herokuapp.com/',
cache: new InMemoryCache(),
});
  • uri specifies the URL of our .
  • cache is an instance of InMemoryCache, which uses to cache results after fetching them.

That's it! Our client is ready to start fetching data. Now before we start using with React, let's first try sending a with plain JavaScript.

In the same main.jsx file, call client.query() with the string (wrapped in the gql template literal) shown below:

main.jsx
// const client = ...
client
.query({
query: gql`
query GetLocations {
locations {
id
name
description
photo
}
}
`,
})
.then((result) => console.log(result));

Run this code, open your console, and inspect the result object. You should see a data property with locations attached, along with some other properties like loading and networkStatus. Nice!

Although executing directly like this can be useful, really shines when it's integrated with a view layer like React. You can bind queries to your UI and update it automatically as new data is fetched.

Let's look at how that works!

Step 4: Connect your client to React

You connect to React with the ApolloProvider component. Similar to React's Context.Provider, ApolloProvider wraps your React app and places on the context, enabling you to access it from anywhere in your component tree.

In main.jsx, let's wrap our React app with an ApolloProvider. We suggest putting the ApolloProvider somewhere high in your app, above any component that might need to access data.

main.jsx
import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';
const client = new ApolloClient({
uri: 'https://flyby-router-demo.herokuapp.com/',
cache: new InMemoryCache(),
});
// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
);

Step 5: Fetch data with useQuery

After your ApolloProvider is hooked up, you can start requesting data with useQuery. The useQuery hook is a React hook that shares data with your UI.

Switching over to our App.jsx file, we'll start by replacing our existing file contents with the code snippet below:

App.jsx
// Import everything needed to use the `useQuery` hook
import { useQuery, gql } from '@apollo/client';
export default function App() {
return (
<div>
<h2>My first Apollo app 🚀</h2>
</div>
);
}

We can define the we want to execute by wrapping it in the gql template literal:

App.jsx
const GET_LOCATIONS = gql`
query GetLocations {
locations {
id
name
description
photo
}
}
`;

Next, let's define a component named DisplayLocations that executes our GET_LOCATIONS with the useQuery hook:

App.jsx
function DisplayLocations() {
const { loading, error, data } = useQuery(GET_LOCATIONS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error : {error.message}</p>;
return data.locations.map(({ id, name, description, photo }) => (
<div key={id}>
<h3>{name}</h3>
<img width="400" height="250" alt="location-reference" src={`${photo}`} />
<br />
<b>About this location:</b>
<p>{description}</p>
<br />
</div>
));
}

Whenever this component renders, the useQuery hook automatically executes our and returns a result object containing loading, error, and data properties:

  • automatically tracks a 's loading and error states, which are reflected in the loading and error properties.
  • When the result of your comes back, it's attached to the data property.

Finally, we'll add DisplayLocations to our existing component tree:

App.jsx
export default function App() {
return (
<div>
<h2>My first Apollo app 🚀</h2>
<br/>
<DisplayLocations />
</div>
);
}

When your app reloads, you should briefly see a loading indicator, followed by a list of locations and details about those locations! If you don't, you can compare your code against the completed app on CodeSandbox.

Congrats, you just made your first component that renders with GraphQL data from Apollo Client! 🎉 Now you can try building more components that use useQuery and experiment with the concepts you just learned.

Next steps

Now that you've learned how to fetch data with , you're ready to dive deeper into creating more complex queries and . After this section, we recommend moving on to:

  • Queries: Learn how to fetch queries with and dive deeper into configuration options. For a full list of options, check out the API reference for useQuery.
  • Mutations: Learn how to update data with and when you'll need to update the Apollo cache. For a full list of options, check out the API reference for useMutation.
  • Apollo Client API: Sometimes, you'll need to access the client directly like we did in our plain JavaScript example above. Visit the API reference for a full list of options.
Previous
Why Apollo Client?
Next
Queries
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company