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";
3
4// Create a client
5const client = new ApolloClient({
6 uri: `https://graphql.withalpaca.travel?accessToken=${accessToken}`,
7 cache: new InMemoryCache(),
8});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 graphqlFirst, 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";
4
5import App from "./App";
6
7const rootElement = document.getElementById("root");
8const root = createRoot(rootElement);
9
10root.render(
11 <StrictMode>
12 <App />
13 </StrictMode>
14);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";
3
4// Our component we will write to perform the query and display the result
5import DisplayItinerary from "./DisplayItinerary";
6
7// Set your access token
8const accessToken = "YOUR_API_KEY";
9
10// Create a client
11const client = new ApolloClient({
12 uri: `https://graphql.withalpaca.travel?accessToken=${accessToken}`,
13 cache: new InMemoryCache(),
14});
15
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 );
31}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";
3
4// Our example query
5const GET_ITINERARY = gql`
6 query GetItinerary($id: ID!) {
7 itinerary(id: $id) {
8 id
9 __typename
10
11 title
12 synopsis
13 }
14 }
15`;
16
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 });
25
26 // Handle application state
27 if (loading) return <p>Loading...</p>;
28 if (error) return <p>Error : {error.message}</p>;
29
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 );
37}
38
39export default DisplayItinerary;The expected response from the server would be like the following:
1{
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 }
10}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
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.
Recommendations
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 // ...
5};
6
7// Create a client
8const client = new ApolloClient({
9 uri: `https://graphql.withalpaca.travel?accessToken=${accessToken}`,
10 cache: new InMemoryCache({ typePolicies }),
11});alpaca.tech
Copyright © 2023 - Made with love ❤️ in Australia.