close

Filter

loading table of contents...

Headless Server Developer Manual / Version 2207

Table Of Contents

14.1.3 Setup Apollo for GraphQL

The first step will be to basically configure the Apollo client and cache. The more in-depth setup will be done in the Section 14.2.2, “Configuring Apollo Cache”. For more information on Apollo, see the Apollo documentation.

To get Apollo running in the app, the Apollo Client needs to be imported in the App.jsx file. HttpLink and InMemoryCache will be needed for configuration.

The next step is to initialize it. A new instance of ApolloClient, named client, is created with two options. cache is an InMemoryCache object and link provides the uri address to the CoreMedia headless server the client will be connected to.

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

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
        uri: 'https://headless.example.com/graphql',
    })
});

In a final step, the ApolloProvider is wrapped around the app in the render method to be accessible to all inner components.

function App() {
  return (
    <ApolloProvider client={client}>
      <h1>Hello World</h1>
    </ApolloProvider>
  );
}

export default App;

Example 14.1. Example for Hello World App


Now the app works with Apollo and is connected to the CoreMedia Headless Server.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.