Apollo client

Apollo client

apollo client is an awesome library that supports all web frameworks like angular, react, and vue but it also supports mobile clients like IOS, Android, and react-native. It is super easy to use.

Installing

open the terminal in your client and run:

$ npm install @apollo/client graphql

Usage

Exposing the client

You can create the ApolloClient which you then use for all public API queries like:

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

const APIURL = 'https://api-mumbai.lens.dev/';

export const apolloClient= new ApolloClient({
  uri: APIURL,
  cache: new InMemoryCache(),
})

Querying the API

Then you can use it to query the Lens public API:

import { apolloClient } from './apollo-client';
import { gql } from '@apollo/client'

const query  = `
  query {
    ping
  }
`

export const queryExample = async () => {
   const response = await apolloClient.query({
    query: gql(query),
  })
  console.log('Lens example data: ', response)
}

A lot of queries need variables to be passed in, this is super easy by using the variables argument in the query

import { apolloClient } from './apollo-client';
import { gql } from '@apollo/client'

const query = `query($request: ChallengeRequest!) {
  challenge(request: $request) {
        text
    }
  }
`

export const queryExample = async () => {
   const response = await apolloClient.query({
    query: gql(query),
    variables: {
      request: {
         address: "0xdfd7D26fd33473F475b57556118F8251464a24eb"
      },
    },
  })
  console.log('Lens example data: ', response)
}

Mutations using the API

While we use queries to fetch data, we use mutations to modify server-side data.

import { apolloClient } from './apollo-client';
import { gql } from '@apollo/client'

const AUTHENTICATION = `
 mutation($request: SignedAuthChallenge!) { 
    authenticate(request: $request) {
      accessToken
      refreshToken
    }
 }
`

export const authenticate = (address, signature) => {
   return apolloClient.mutate({
    mutation: gql(AUTHENTICATION),
    variables: {
      request: {
        address,
        signature,
      },
    },
  })
}

Did this page help you?