Staying ahead of trends is crucial to delivering efficient and scalable solutions, especially in the ever-evolving landscape of mobile app development. One such advancement that has gained prominence is the integration of Apollo client and GraphQL into React Native applications and it offers numerous benefits. It not only streamlines data fetching and updating but also simplifies the development process by offering a single, comprehensive endpoint for data retrieval. This approach leads to codebases that are easy to maintain and scale, which is a key factor for any successful mobile app.

### Why Apollo & GraphQL Codegen

To understand the key of this combination let's delve into the integration of the Apollo Client and GraphQL in Codegen and their roles:

* Apollo Client facilitates the efficient management of data in the user interface, ensuring that components are only re-rendered when necessary and provides the ability to cache data
* GraphQL Codegen automates the generation of secure code based on the GraphQL schema, reducing the likelihood of runtime errors and enhancing the overall developer experience

But why do we need such solutions in our React Native applications? The answer lies in the quest for a more maintainable and scalable code base. Apollo and GraphQL Code Generator (Codegen) work in tandem to enforce type safety, eliminate common pitfalls and streamline the development workflow. In the field of mobile app development, where the most important factors are responsiveness and performance, the integration of these tools can significantly improve the quality of React Native apps.

In this article, we will explore the step-by-step process of implementing Apollo and GraphQL Codegen in a React Native project, discovering their potential to improve the performance and maintainability of mobile apps.

### Initialization of Apollo Client

1. Navigate to the project root directory and install Apollo Client and graphql module using `yarn add @apollo/client graphql` or `npm i @apollo/client graphql`

*Remember about Pods! Use the `pod install` command after installation*

1. Inside the `src` directory, create a new folder `graphql` with a `apolloClient.ts` file inside
2. Create a new instance inside the `apolloClient.ts` file by using the `new ApolloClient` command like so:

```ts
import { ApolloClient, InMemoryCache } from '@apollo/client';

export const client = new ApolloClient({
  uri: 'https://spacex-production.up.railway.app/',
  cache: new InMemoryCache(),
});
```

1. Wrap your application at the topmost level with a `ApolloProvider` component using the client as prop like this:

```ts
import { ApolloProvider } from '@apollo/client';
import { client } from './graphql/apolloClient';
import { Screen } from './Screen';

const App: React.FC = () => {
  return (
    <ApolloProvider client={client}>
      <Screen />
    </ApolloProvider>
  );
};
```

That's it! The Apollo Client instance has now been implemented. The next step is:

### Initialization of GraphQL Code Generator / GraphQL Codegen

1. Go to the project root directory and install Codegen with sub modules using either yarn or npm:

* `yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-graphql-request @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo`
* `npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-graphql-request @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo`

1. Have the Codegen CLI scan all the `*.ts` files in the source directory to find all queries and mutations. GraphQL Codegen will use them to generate typesafe hooks that take care of all backend calls. The resulting types and hooks will be created in `./src/graphql/graphql.ts`. To automate this process, create a new file called `graphql.config.yml` using this code:

```ts
schema:
	- "https://spacex-production.up.railway.app/"
documents:
	- "./src/**/*.ts"
generates:
	./src/graphql/graphql.ts:
		plugins:
			- typescript
			- typescript-operations
			- typescript-react-apollo
```

> You can find more information about this file in the [graphql.config.yml docs.](https://the-guild.dev/graphql/config/docs/user/usage)

1. Add script to `package.json`

```ts
"scripts": {
	{...}
	"codegen": "graphql-codegen --config graphql.config.yml"
},
```

Congratulations! You have finished configuring GraphQL Codegen!

### Time to generate your types!

1. Add a new folder called `queries` in the graphql folder. Inside the `queries` folder, create a new file named `query.ts`.
2. Define a graphql query in the newly created file like this:

```ts
import { gql } from '@apollo/client';

export const Example = gql`
  query Example {
    company {
      ceo
      coo
      cto
      founder
    }
    roadster {
      name
      launch_date_utc
      earth_distance_km
    }
  }
`;
```

1. Run `yarn codegen`. If you can see this input, everything is working properly!![GraphQL Codegen input](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ap-sc1.webp)

### How to use this?

Remember the `query.ts` file? We have defined an example query there. Let's use it in our app! All queries and mutations are implemented as hooks with names similar to the gql object names. All you have to do, is to import a named `useQuery` hook. In our `Example` query the generated hook is named `useExampleQuery`. let's import that from the generated `graphql.ts` file! It's really simple!

```ts
import { useExampleQuery } from './graphql/graphql';
import { SafeAreaView, Text, View, ActivityIndicator } from 'react-native';

export const Screen: React.FC = () => {
  const { data, loading, error } = useExampleQuery();

  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Error from useExampleQuery hook</Text>;

  return (
    <SafeAreaView>
      <View style={{ gap: 10 }}>
        <Text>SpaceX:</Text>
        <Text>CEO {data?.company?.ceo}</Text>
        <Text>COO {data?.company?.coo}</Text>
        <Text>CTO {data?.company?.cto}</Text>
        <Text>Founder {data?.company?.founder}</Text>
      </View>
      <View style={{ gap: 10 }}>
        <Text>Roadster:</Text>
        <Text>NAME {data?.roadster?.name}</Text>
        <Text>LAUNCH DATE{data?.roadster?.launch_date_utc}</Text>
        <Text>EARTH DISTANCE{data?.roadster?.earth_distance_km}</Text>
      </View>
    </SafeAreaView>
  );
};
```

And that's it!
![Apollo Client + GraphQL Codegen](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ap-sc2.webp)

The result of the query is also typed:
![Result of Apollo Query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ap-sc3.webp)

### Conclusion

In summary, the use of GraphQL, Apollo Client combined with GraphQL Codegen in React Native applications provides a number of advantages in mobile app development. By leveraging the performance of GraphQL for data retrieval and the robust client-side management provided by Apollo, developers can create highly responsive, scalable and maintainable mobile applications. This integration not only streamlines the data retrieval process, but also enhances the developer experience with enforced type safety and automatic code generation by GraphQL Code Generator. As the mobile app market evolves, the inclusion of these technologies becomes a necessity, offering a compelling solution to meet the ever-growing demands of modern app development.

Code base: [Github Repository](https://github.com/Marcin-Falkowski/React-Native-with-Apollo-and-GraphQL-Codegen-example)

**Enjoy!**

Apollo + GraphQL Codegen implementation into a React Native application

# React Native monorepo with shared components & TypeScript

To start we should ask a simple question: why should I use a monorepo for React Native apps? It's actually very useful when you have two (or more) similar applications. Monorepos enable sharing of components, functions and logic between all of the included applications. This can unlock a variety of benefits like core sharing, simplified ci/cd process and consistent tooling.

### Setting up workspaces with Yarn

When creating a monorepo for react native applications, it is better to avoid using nohoist because we don't need duplicates inside the root level and inside the project level `node_modules`.

### Project structure

Our projects need to be divided into subfolders. We treat them as separate entities. Here’s an example of how our project structure can look like:

```bash
    my-app/
	    packages/
		    app1/ <- first app
		    app2/ <- second app
		    shared/ <- folder for shared components, logic, etc.
```

### Creating a package.json file in the root directory

1. open your terminal and go to the root directory `cd my-app`,
2. create a package.json file with `yarn init -y`,
3. open and check your package.json file. It should look something like this:

```json
{
  "private": "true",
  "name": "my-app",
  "version": "1.0.0",
  "workspaces": ["packages/*"]
}
```

* Private: true is required. That's very important because we don't want to make our workspaces public.
* Name: the name of your monorepo.
* Workspaces: our workspace with the projects structured in a tree. For now, it's okay as is.

### Creating React Native projects

To create React Native projects we can use the following commands:

```bash
cd packages
npx react-native init FirstApp --directory app1 --template react-native-template-typescript
npx react-native init SecondApp --directory app2 --template react-native-template-typescript
```

If your app names and directories match you can use this instead:

```bash
cd packages
npx react-native init app1 --template react-native-template-typescript
npx react-native init app2 --template react-native-template-typescript
```

where `app1` and `app2` are the names of both our apps and their directories.

Most likely your apps have now been created but pods will not install. No worries, we’ll fix this in the next step:

### IOS configuration

1. Open `Podfile` go into your app and change paths to the `node_modules`

```bash
- require_relative '../node_modules/react-native/scripts/react_native_pods'
- require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+ require_relative '../../../node_modules/react-native/scripts/react_native_pods'
+ require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules'
```

1. Open your terminal and install pods. If you are in the packages/app\* folder run:

```bash
	cd ios
	pod install
```

1. Open XCode and your project, select the Project navigator and click on the name of your project. This will open project settings.

![XCode](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/screen1-1730846450836.webp)

1. Click `Build Phases`, open `Bundle React Native code and images` and change the script paths:

```bash
- WITH_ENVIRONMENT="../../node_modules/react-native/scripts/xcode/with-environment.sh"
- REACT_NATIVE_XCODE="../../node_modules/react-native/scripts/react-native-xcode.sh"
+ WITH_ENVIRONMENT="../../../node_modules/react-native/scripts/xcode/with-environment.sh"
+ REACT_NATIVE_XCODE="../../../node_modules/react-native/scripts/react-native-xcode.sh"
```

![XCode](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/screen2-1730846453820.webp)

**!Remember to repeat this for each app in your monorepo!**

### Android setup

**For React Native below 0.71**

1. Open `myapp/packages/app1/android/build.gradle` and change the paths to `node_modules`

```bash
allprojects {
    repositories {
        maven {
// All React Native (JS, Obj-C sources, Android binaries) is installed from npm
-  url("$rootDir/../node_modules/react-native/android")
+ url("$rootDir../../../../node_modules/react-native/android")
        }
        maven {
// Android JSC is installed from npm
- url("$rootDir/../node_modules/jsc-android/dist")
+ url("$rootDir../../../../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}
```

1. Open `myapp/packages/app1/android/settings.gradle` and change the paths to `node_modules`

```bash
rootProject.name = 'FirstApp'
- apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
+ apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
applyNativeModulesSettingsGradle(settings)
include ':app'
- includeBuild('../node_modules/react-native-gradle-plugin')
+ includeBuild('../../../node_modules/react-native-gradle-plugin')

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
- project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
+ project(":ReactAndroid").projectDir = file('../../../node_modules/react-native/ReactAndroid')
    include(":ReactAndroid:hermes-engine")
- project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
+ project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
}
```

1. Open `myapp/packages/app1/android/app/build.gradle` and override the default location of the cli

```bash
project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing
+ cliPath: "../../../../node_modules/react-native/cli.js",
]
```

In the same file change these lines:

```bash
- apply from: "../../node_modules/react-native/react.gradle"
+ apply from: "../../../../node_modules/react-native/react.gradle"
```

```bash
- apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+ apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
```

```bash
 if (isNewArchitectureEnabled()) {
// We configure the CMake build only if you decide to opt-in for the New Architecture.
            externalNativeBuild {
                cmake {
                    arguments "-DPROJECT_BUILD_DIR=$buildDir",
-  "-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
+  "-DREACT_ANDROID_DIR=$rootDir/../../node_modules/react-native/ReactAndroid",
- "-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
+  "-DREACT_ANDROID_BUILD_DIR=$rootDir/../../node_modules/react-native/ReactAndroid/build",
-  "-DNODE_MODULES_DIR=$rootDir/../node_modules",
+  "-DNODE_MODULES_DIR=$rootDir/../../node_modules",
                        "-DANDROID_STL=c++_shared"
                }
            }
            if (!enableSeparateBuildPerCPUArchitecture) {
                ndk {
                    abiFilters (*reactNativeArchitectures())
                }
            }
        }
```

**For React Native above 0.71**

1. Go to `myapp/packages/app1/android/app/build.gradle`
2. Find and edit the following:

```ts
react {
   hermesCommand = "../../node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc"
}
```

1. Go to `myapp/packages/app1/android/build.gradle` and add

```ts
allprojects {
    project.pluginManager.withPlugin("com.facebook.react") {
        react {
            reactNativeDir = rootProject.file("../../../node_modules/react-native/")
            codegenDir = rootProject.file("../../../node_modules/react-native-codegen/")
        }
    }
}
```

1. Go to the `myapp/packages/app1/andoird/settings.gradle` and add

```bash
apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
includeBuild('../../../node_modules/react-native-gradle-plugin')
```

**!Remember to repeat this for every app in your monorepo!**

### Android setup

**For React Native below 0.71**

1. Open `myapp/packages/app1/android/build.gradle` and change the paths to `node_modules`

```bash
allprojects {
    repositories {
        maven {
// All React Native (JS, Obj-C sources, Android binaries) is installed from npm
-  url("$rootDir/../node_modules/react-native/android")
+ url("$rootDir../../../../node_modules/react-native/android")
        }
        maven {
// Android JSC is installed from npm
- url("$rootDir/../node_modules/jsc-android/dist")
+ url("$rootDir../../../../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}
```

1. Open `myapp/packages/app1/android/settings.gradle` and change the paths to `node_modules`

```bash
rootProject.name = 'FirstApp'
- apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
+ apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
applyNativeModulesSettingsGradle(settings)
include ':app'
- includeBuild('../node_modules/react-native-gradle-plugin')
+ includeBuild('../../../node_modules/react-native-gradle-plugin')

if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true") {
    include(":ReactAndroid")
- project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
+ project(":ReactAndroid").projectDir = file('../../../node_modules/react-native/ReactAndroid')
    include(":ReactAndroid:hermes-engine")
- project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
+ project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
}
```

1. Open `myapp/packages/app1/android/app/build.gradle` and override the default location of the cli

```bash
project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing
+ cliPath: "../../../../node_modules/react-native/cli.js",
]
```

In the same file change these lines:

```bash
- apply from: "../../node_modules/react-native/react.gradle"
+ apply from: "../../../../node_modules/react-native/react.gradle"
```

```bash
- apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+ apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
```

```bash
 if (isNewArchitectureEnabled()) {
// We configure the CMake build only if you decide to opt-in for the New Architecture.
            externalNativeBuild {
                cmake {
                    arguments "-DPROJECT_BUILD_DIR=$buildDir",
-  "-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
+  "-DREACT_ANDROID_DIR=$rootDir/../../node_modules/react-native/ReactAndroid",
- "-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
+  "-DREACT_ANDROID_BUILD_DIR=$rootDir/../../node_modules/react-native/ReactAndroid/build",
-  "-DNODE_MODULES_DIR=$rootDir/../node_modules",
+  "-DNODE_MODULES_DIR=$rootDir/../../node_modules",
                        "-DANDROID_STL=c++_shared"
                }
            }
            if (!enableSeparateBuildPerCPUArchitecture) {
                ndk {
                    abiFilters (*reactNativeArchitectures())
                }
            }
        }
```

**For React Native above 0.71**

1. Go to `myapp/packages/app1/android/app/build.gradle`
2. Find and edit the following:

```ts
react {
   hermesCommand = "../../node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc"
}
```

1. Go to `myapp/packages/app1/android/build.gradle` and add

```ts
allprojects {
    project.pluginManager.withPlugin("com.facebook.react") {
        react {
            reactNativeDir = rootProject.file("../../../node_modules/react-native/")
            codegenDir = rootProject.file("../../../node_modules/react-native-codegen/")
        }
    }
}
```

1. Go to the `myapp/packages/app1/andoird/settings.gradle` and add

```bash
apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
includeBuild('../../../node_modules/react-native-gradle-plugin')
```

**!Remember to repeat this for every app in your monorepo!**

### Metro configuration

Now we should indicate for metro where `node_modules` are located. Go to the `metro.config.js` file and add `watchFolders`:

```ts
const path = require('path');
module.exports = {
  watchFolders: [path.resolve(__dirname, '../../node_modules')],
};
```

### Shared package

Inside the shared folder, create a `package.json` file.

```bash
	cd shared
	yarn init -y
```

Your `package.json` file should look something like this:

```json
{
  "name": "@my-app/shared",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "rimraf dist && tsc",
    "postinstall": "yarn build",
    "watch": "tsc --watch"
  },
  "dependencies": {
    "react-native": "0.69.1",
    "react": "18.0.0"
  },
  "devDependencies": {
    "rimraf": "^3.0.2",
    "typescript": "^4.4.4"
  },
  "keywords": [],
  "author": ""
}
```

Close your `package.json` and now let's create a `tsconfig.json` file:

```json
{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "strictPropertyInitialization": false,
    "declaration": true,
    "jsx": "react",
    "baseUrl": "./src"
  }
}
```

Now go into your shared folder, and create an src folder there. Its structure should look something like mine:

```bash
src/
	index.ts
	compontents/
		index.ts
		atoms/
			index.ts
			Test.tsx
```

Where `Test.tsx` is a React Function component :)

Now, we can export this in `index.ts` in a `shared` folder via:

```bash
export  *  from  './src'
```

Now let's create a build of our `shared` directory:

```bash
yarn build
```

With that, we have finished setting up our `shared` folder. Now we should indicate this directory to our applications. So now we need to add our `shared` dependency to the `package.json` file in all our applications:

```json
"dependencies" : {
	"@my-app/shared": "^1.0.0"
}
```

and for `metro.config.js`:

```ts
module.exports = {
  watchFolders: [
    path.resolve(__dirname, '../../node_modules'),
    path.resolve(__dirname, '../../node_modules/@my-app/shared'),
  ],
};
```

Then go back into your root directory and run:

`yarn`

Now we should be able to import things from `shared` directly into our React Native Apps:

```ts
import React, { type PropsWithChildren } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import { Test } from '@my-app/shared';

const Section: React.FC<
  PropsWithChildren<{
    title: string;
  }>
> = ({ children, title }) => {
  const isDarkMode = useColorScheme() === 'light';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: !isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={!isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <Test />
        <View
          style={{
            backgroundColor: !isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
```

**And that’s how it works! Enjoy!**

Posts by Marcin Falkowski