# 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](https://bluebase.gitbook.io/core/key-concepts/configs).

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bluebase.gitbook.io/core/tutorial/1.-create-a-backend-api/2.2-setup-apollo-client.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.