2.2 Setup Apollo Client

To consume our GraphQL API on the app, we will be using the popular Apollo 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:

plugins.ts

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,
];

plugins.native.ts

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,
];

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.

Create the following file in the root folder:

configs.ts

export const configs = {

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

};

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:

App.tsx

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} />
	);
}

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 with react-native. Add the following file in the root folder to bypass it.

metro.config.js

// 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;

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