The first step will be to configure the Apollo client and cache in a basic way. The more in-depth setup will be done in the Section 12.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 initialise 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;

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