Integrating Apollo Client with React Native

28.06.2023 — graphql, react native — 1 min read

Resources

Install it with npm or yarn

yarn add @apollo/client graphql

Then wrap your application in the ApolloProvider component

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

const client = new ApolloClient({
  uri: graphqlUrl,
  cache: new InMemoryCache(),
  headers: {
    'x-api-key': apiKey,
  },
});

function App() {
  ...
	return (
    <NativeBaseProvider theme={extendedTheme} config={config}>
      <NavigationContainer>
        <ApolloProvider client={client}>
          {signedIn ? <MainContainer /> : <AuthContainer />}
        </ApolloProvider>
      </NavigationContainer>
    </NativeBaseProvider>
  )
}

Create a gql query

// graphql/queries.ts
import { gql } from '@apollo/client';

export const jobs = gql`
  query Jobs($companyId: String!) {
    jobs(companyId: $companyId) {
      jobNo
      companyId
      customer {
        name
        phone
      }
      product {
        id
        name
        fuel
        serialNumber
        modelName
        installationDate
        warrantyExpiryDate
      }
      ...
    }
  }
`