Hello Developers, Many of us using State Management libraries like Redux, Redux Saga, Rematch, MobX. Apollo Client is one of the popular state management library with a stack of features. Today, we will discuss the Apollo Client library and see how it communicates with servers using GraphQL and manages both local and remote data. We will cover the step by step process to communicate GitHub GraphQL API and search list of GitHub repositories.

Dependency Installation -

/*
* @apollo/client
* graphql
* apollo3-cache-persist
*/
npm i @apollo/client graphql apollo3-cache-persist

@apollo/client - package contains everything you need to set up for Apollo Client. It includes state management, cache, error handling

graphql - package parsing GraphQL queries

apollo3-cache-persist - package persist your data in AsyncStorage

MobX supports an array of features for a modern state management system and everything in one package MobX, not more extra dependency.

Initialize ApolloClient -

Let’s first import all required dependency

import {
    ApolloClient,
    InMemoryCache,
    ApolloProvider,
    useQuery,
    gql
  } from "@apollo/client";

ApolloClient - create client object to communicate with server

InMemoryCache - cache instance to cache query results

ApolloProvider - place Apollo Client on the Context

useQuery - execute query with variables

gql - GraphQL query

const httpLink = createHttpLink({
    uri: 'https://api.github.com/graphql',
  });
  
  const authLink = setContext((_, { headers }) => {
    const token = "ghp_xxxxxxxxxxxxx"; // replace your github personal access token here
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      }
    }
  });
  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache,
    defaultOptions: { watchQuery: { fetchPolicy: 'cache-and-network' } },
  })

Lets’ understand what we did over here,

Basically ApolloClient requires two arguments, link (server link) - in developer terms API EndPoint/BaseURL, cache - memory cache of your response. Over here we have a bit twist. We are calling the GitHub API which requires AccessToken to communicate API, so we generate a token from GitHub and place it in the header. If you have an Open API then no more need of headers.

Steps to Create Token -

Github Login > Settings > Developer Settings > Personal Access Tokens — Give Descriptive Name — CheckMark repo, admin:repo_book (read:repo_hook), delete_repo and press Generate Token.

Connect Apollo Client to React Component -

<ApolloProvider client={client}>
 <GitRepository />
</ApolloProvider>

All you know about React Context API. Here, we connect Apollo Client with ApolloProvider, so the client will be available in all child components - component tree.

Construct the Query -

const fetchRepository = gql`
query SearchMostTop10Star($queryString: String! $afterCursor:String) {
  search(query: $queryString, type: REPOSITORY, first: 10, after: $afterCursor){
    repositoryCount
    edges {
      node {
        ... on Repository {
          name
          descriptionHTML
        }
      }
      cursor
    }
  }
}
`

We want to search for a GitHub repository. So we have passed two arguments in the query, queryString - whatever user search on TextInput will be applied on search, after - cursor position - each time we send the current cursor position, so query will fetch next 10 records after that cursor point.

Design Component -

Let’s first add TextInput - which allows the user to enter a repository name and onChangeText we will store text into State, onEndEditing we will dispatch a query.

<View style={Styles.repositoryInputContainer}>
  <TextInput
    style={Styles.repositoryTextInput}
    placeholder="Enter your text here"
    onChangeText={text => setSearchText(text)}
    onEndEditing={(e) => endEditing(e)}
    clearButtonMode="while-editing"
  />
</View>

Let's add FlatList - will list all repositories.

<FlatList
  data={arrRepository}
  renderItem={({ item }) => (
    <GitRepoItem
      repository={item}
    />
  )}
  keyExtractor={(x, i) => i.toString()}
  keyExtractor={(repository, i) => `${repository.cursor}-${i}`}
  ListFooterComponent={<FooterView />}
  ItemSeparatorComponent={() => ItemSeparatorComponent()}
/>

Now, it's time to execute a query

const { data } = useQuery(fetchRepository, {
    variables: cursorVariable
});
/*
* cursorVariable: { "queryString": "react native" }
*/

Here we will send a few arguments in variables. This is the initial Query Call when the component didMount so we will send { queryString: “React”} - so it will look like - variables: { “queryString”: “react” }. So what happens if we execute this query, it will return us a list of Repositories that contain name react. Each repository contains node name, htmlDescription, cursor (cursor position). Now we have a list of Repositories in FlatList - Now lets scroll down and see all first 10 repositories. Initially we haven’t passed after keyword so it will fetch first 10 repositories, Now what happen if you want to fetch next 10 record then,

So Let’s add onEndReached - It will be invoked when the user reaches the end of FlatList.

<FlatList
  data={arrRepository}
  renderItem={({ item }) => (
    <GitRepoItem
      repository={item}
    />
  )}
  keyExtractor={(x, i) => i.toString()}
  keyExtractor={(repository, i) => `${repository.cursor}-${i}`}
  ListFooterComponent={<FooterView />}
  ItemSeparatorComponent={() => ItemSeparatorComponent()}
  onEndReachedThreshold={0.1}
  onEndReached={() => { 
    if (!dataLoading) {
      dataLoading = true;
      setCursorVariable({
        "queryString": searchText,
        "afterCursor": (arrRepository.length > 0) ? arrRepository[arrRepository.length - 1].cursor : ''
      });
    }
   }}
/>

We have added onEndReached - to fetch the next 10 repositories from GitHub by sending the cursor position in the query parameter. Over here in queryString we will send searchText (user entered in TextInput), after - cursor value (cursor position) - which we will receive in the query response. So the query will return us the next 10 records. That’s it.

So, it’s quite simple in understanding and integrating. GraphQL makes your task simple, you can customize query according to your business logic and your convenience.

Please download source code from here.