> For the complete documentation index, see [llms.txt](https://bluebase.gitbook.io/core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bluebase.gitbook.io/core/tutorial/1.-create-a-backend-api/2.2-setup-apollo-client.md).

# 2.2 Setup Apollo Client

To consume our GraphQL API on the app, we will be using the popular [Apollo](https://www.apollographql.com/) Graphql Client. Luckily, we already have an Apollo plugin available for BlueBase that takes care of all the setup.

### Step 1: Install the  BlueBase Apollo plugin

```
yarn add --dev @apollo/client @bluebase/plugin-apollo graphql
```

### Step 2: Use the plugin

Same as the last time, we import the apollo plugin:

{% code title="plugins.ts" %}

```typescript
import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginMaterialUI from '@bluebase/plugin-material-ui';
import BlueBasePluginReactRouter from '@bluebase/plugin-react-router';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginMaterialUI,
	BlueBasePluginReactRouter,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];
```

{% endcode %}

{% code title="plugins.native.ts" %}

```typescript
import BlueBasePluginApollo from '@bluebase/plugin-apollo';
import BlueBasePluginJsonSchemaComponents from '@bluebase/plugin-json-schema-components';
import BlueBasePluginLauncher from '@bluebase/plugin-launcher';
import BlueBasePluginReactNativePaper from '@bluebase/plugin-react-native-paper';
import BlueBasePluginReactNavigation from '@bluebase/plugin-react-navigation';
import BlueBasePluginResponsiveGrid from '@bluebase/plugin-responsive-grid';
import BlueBasePluginSettingsApp from '@bluebase/plugin-settings-app';
import { MaterialCommunityIcons } from '@bluebase/plugin-vector-icons';

import Plugin from './src';

export const plugins = [
	BlueBasePluginApollo,
	BlueBasePluginJsonSchemaComponents,
	BlueBasePluginLauncher,
	BlueBasePluginReactNativePaper,
	BlueBasePluginReactNavigation,
	BlueBasePluginResponsiveGrid,
	MaterialCommunityIcons,

	Plugin,
	BlueBasePluginSettingsApp,
];

```

{% endcode %}

### Step 3: Create Apollo Configs

Now we need to input our API URL as well as the API Token into the Apollo client. We do this by using [BlueBase Configs](/core/key-concepts/configs.md).

Create the following file in the root folder:

{% code title="configs.ts" %}

```typescript
export const configs = {

	// Apollo Graphql Configs
	'plugin.apollo.httpLinkOptions': {
		uri: [[API_URL]] + '/graphql/v1',
		headers: {
			apiKey: [[API_KEY]]
		}
	},

};
```

{% endcode %}

Replace `[[API_URL]]` and `[[API_KEY]]` with the values relevant to your project.

### Step 4: Use the configs

Similar to how we use the plugins, we need to pass our configs object as a prop to the `BlueBaseApp` component.

Change the contents of the `App.tsx` to match below:

{% code title="App.tsx" %}

```typescript
import 'react-native-gesture-handler';

import { BlueBaseApp } from '@bluebase/core';
import React from 'react';

import { configs } from './configs';
import { plugins } from './plugins';

export default function App() {
	return (
		<BlueBaseApp configs={configs} plugins={plugins} />
	);
}

```

{% endcode %}

### Step 5: Bypass Apollo Bug

At the time of writing this tutorial, the latest version of Apollo Client (v3.5.4) has compatibility an [issue](https://github.com/facebook/metro/issues/535) with react-native. Add the following file in the root folder to bypass it.

{% code title="metro.config.js" %}

```javascript
// Learn more https://docs.expo.io/guides/customizing-metro

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

// https://github.com/facebook/metro/issues/535
// https://github.com/apollographql/apollo-client/releases/tag/v3.5.4
config.resolver.sourceExts = process.env.RN_SRC_EXT
	? [...process.env.RN_SRC_EXT.split(',').concat(config.resolver.sourceExts), 'cjs'] // <-- cjs added here
	: [...config.resolver.sourceExts, 'cjs']; // <-- cjs added here

// https://docs.expo.dev/bare/installing-updates/
config.transformer.assetPlugins = [
	...config.transformer.assetPlugins,
	'expo-asset/tools/hashAssetFiles',
];
module.exports = config;
```

{% endcode %}

This is it. Our App is configured to use the GraphQL API through the Apollo client.