Was this helpful?

Apollo React Client

This document describes using Apollo Client version 3 for React.

Getting Started

We recommend that you start with the latest documentation for Apollo React Client. This will cover the installation and additional overview of configuring your application for using Apollo Client

Client Configuration

Once you have installed apollo and referenced their documentation, you can configure the client like the below:

1// Set your access token
2const accessToken = "YOUR_API_KEY";
4// Create a client
5const client = new ApolloClient({
6  uri: `https://graphql.withalpaca.travel?accessToken=${accessToken}`,
7  cache: new InMemoryCache(),

Simple Example

The below example shows a simple example of using React v18 and Apollo Client v3 together to call the Alpaca Travel GraphQL API with an example operation. We will create minimal example with a query that accesses an itinerary.

We will assume that you have setup your React application environment, and added the required dependencies for Apollo to your application.

1npm install @apollo/client graphql

First, we will use a standard index.js file in this example that will load our react application on to the HTML element "root".

1// index.js
2import { StrictMode } from "react";
3import { createRoot } from "react-dom/client";
5import App from "./App";
7const rootElement = document.getElementById("root");
8const root = createRoot(rootElement);
11  <StrictMode>
12    <App />
13  </StrictMode>

Next, we will create an App.js file that will configure our application with an Apollo client provided to the "ApolloProvider". This will enable our application to use the Apollo client with the "useQuery" hook.

1// App.js
2import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
4// Our component we will write to perform the query and display the result
5import DisplayItinerary from "./DisplayItinerary";
7// Set your access token
8const accessToken = "YOUR_API_KEY";
10// Create a client
11const client = new ApolloClient({
12  uri: `https://graphql.withalpaca.travel?accessToken=${accessToken}`,
13  cache: new InMemoryCache(),
16// Provide the application the apollo client
17export default function App() {
18  return (
19    <ApolloProvider client={client}>
20      <div className="App">
21        <h1>
22          My first Alpaca GraphQL app{" "}
23          <span role="img" aria-label="launch">
24            🚀
25          </span>
26        </h1>
27        <DisplayItinerary />
28      </div>
29    </ApolloProvider>
30  );
You will need to substitute your secret or public key in to the above code.

Next you will want to create a component that will make calls to the Alpaca Travel GraphQL API. In this example, we will perform a simple operation in order to read from an itinerary.

Using "useQuery" we can provide a GQL query operation to fetch our itinerary and then display it using a component.

1// DisplayItinerary.jsx
2import { useQuery, gql } from "@apollo/client";
4// Our example query
5const GET_ITINERARY = gql`
6  query GetItinerary($id: ID!) {
7    itinerary(id: $id) {
8      id
9      __typename
11      title
12      synopsis
13    }
14  }
17// Create a component to load a specific itinerary
18function DisplayItinerary() {
19  // Apollo useQuery calls our query supplying an itinerary ID to load
20  const { loading, error, data } = useQuery(GET_ITINERARY, {
21    variables: {
22      id: "itinerary/458UEs3vKr8asSekgzPcKg",
23    },
24  });
26  // Handle application state
27  if (loading) return <p>Loading...</p>;
28  if (error) return <p>Error : {error.message}</p>;
30  // Display the itinerary information retrieved from the server
31  return (
32    <>
33      <h2>{data.itinerary.title}</h2>
34      <p>{data.itinerary.synopsis}</p>
35    </>
36  );
39export default DisplayItinerary;

The expected response from the server would be like the following:

2  "data": {
3    "itinerary": {
4      "id": "itinerary/458UEs3vKr8asSekgzPcKg",
5      "__typename": "Itinerary",
6      "title": "Wild West Coast",
7      "synopsis": "A road trip showcasing Tasmania's World Heritage wilderness and wild untamed west coast."
8    }
9  }

Booting your application you should be presented with the Itinerary information for the itinerary "Wild West Coast".

You can view the above application on CodeSandbox . Make sure you update your API Key with your own API Key otherwise you will be presented with a message "Invalid bearer token".

Alpaca Travel React-Apollo SDK

npm bundle size
npm type definitions

You can also use the Alpaca Travel React-Apollo SDK to leverage a number of functions without requiring you to write your own GraphQL operations.


Configure Apollo for Cursor-based Pagination

The Alpaca Travel GraphQL API leverages a consistent pagination strategy based on the Relay Connections (also known as "Cursor-based"). This pagination strategy covers numerous query operations and you can configure the Apollo Cache to understand and handle pagination correctly for your application.

You should refer to the Apollo Pagination section to understand more about how Apollo covers pagination, and specifially you can refer to the section on Cursor-based pagination and refer to the "Relay-style cursor pagination" section.

Apollo Client works to identify how to merge together your pagination results. As operations can seem similar to Apollo without additional schema configuration, we need to give type policies to Apollo in order for it to differentiate queries based on which arguments will result in different results.

An example type policy is avialable is available as a reference for your application, so that it can handle pagination correctly.

1// Refer to the example as reference
2// https://github.com/AlpacaTravel/graph-sdk/blob/master/packages/react-apollo/example-type-policies.ts
3const typePolicies = {
4  // ...
7// Create a client
8const client = new ApolloClient({
9  uri: `https://graphql.withalpaca.travel?accessToken=${accessToken}`,
10  cache: new InMemoryCache({ typePolicies }),


Copyright © 2023 - Made with love ❤️ in Australia.