How to pass a const variable from one component to another react - reactjs

Question

Hello I am trying to add Apollo to my react app and in the documentation it says to wrap you app in the <ApolloProvider client={client}> tag and pass client in as a variable like so:
import React from 'react';
import ReactDOM from 'react-dom';
import PageLayout from './components/page-layout'
import CreateApolloClient from './apollo-settings'
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient from 'apollo-boost';
import {BrowserRouter} from 'react-router-dom';
const client = new ApolloClient({
uri: 'http://localhost/headless-cms/admin/',
fetchOptions: {
mode: 'no-cors',
},
});
ReactDOM.render(<ApolloProvider client={client}><BrowserRouter><PageLayout /></BrowserRouter></ApolloProvider>, document.getElementById('site-wrapper'));
However I want to remove the const client from the index.js page and move it into another template just to keep things organised like so:
import React from 'react';
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient from 'apollo-boost';
const CreateApolloClient = () => {
const client = new ApolloClient({
uri: 'http://localhost/headless-cms/admin/',
fetchOptions: {
mode: 'no-cors',
},
});
}
export default CreateApolloClient;
What I am struggling with is when importing CreateApolloClient into the index.js page how do I then access the const client and pass it into the <ApolloProvider client={client}>
Thank you for any help in advanced

Answer 1

You should return the apollo client instance in your function and export the createApolloClient.
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient from 'apollo-boost';
export const createApolloClient = () => {
return new ApolloClient({
uri: 'http://localhost/headless-cms/admin/',
fetchOptions: {
mode: 'no-cors',
},
});
}
export default CreateApolloClient;
import React from 'react';
import ReactDOM from 'react-dom';
import PageLayout from './components/page-layout'
import {createApolloClient} from './apollo-settings'
import {BrowserRouter} from 'react-router-dom';
import { ApolloProvider } from '#apollo/react-hooks';
const client = createApolloClient();
ReactDOM.render(<ApolloProvider client={client}><BrowserRouter><PageLayout /></BrowserRouter></ApolloProvider>, document.getElementById('site-wrapper'));