Reacting to Apollo

After learning how to set up my Rails database with GraphQL, I wanted to figure out how to access the queries and mutations on the frontend. I decided to learn something new and use the Apollo Client library which allowed me to fetch data while also automatically updating my UI. Here’s some of the basic steps to setting up Apollo and the first fetch I made.

Apollo has a declarative approach to fetching which contains all of the logic in one useQuery Hook. This makes it very easy to incorporate fetching data into your presentational components and gives you easy access to errors and when the data is loading. The first step is to install the Apollo Client library by running this in your command line which installs the library as well as what it needs to connect with a GraphQL db.

npm install @apollo/client graphql

Once you have your dependencies set up, you need to initialize an ApolloClient with a URL of a running GraphQL server. I wrote this in the index.js file of my create-react-app project. The URL I used was for the note taking application I referenced previously which was set up with GraphQL.

index.js
import { ApolloClient, InMemoryCache } from ‘@apollo/client’;
const client = new ApolloClient({
  uri: ‘yourGraphQLserveraddress’,
  cache: new InMemoryCache()
});

Next you need to connect your client to React through the ApolloProvider component. You’ll import ApolloProvider and then wrap your App Component in it so you have access to the client from anywhere in your application as shown below. That’s really all the setup it takes. Now we can fetch!

index.js
import {ApolloProvider} from '@apollo/client'
render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
document.getElementById(‘root’),
);

To start fetching we need to import the useQuery Hook and the gql function from @apollo/client in our component file. We then create a variable to hold our GraphQL query/mutation with the gql function like this:

Users.js
import {gql, useQuery} from '@apollo/client'
export function GetUsers() {
  const USERS = gql`
    query {
      fetchUsers {
        id
        username
        email
      }
    }
  `
}

Next you use the useQuery Hook and get your data to return the display elements you want like this:

Users.js
const { loading, error, data } = useQuery(USERS);
  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error :(</p>;
  return data.fetchUsers.map(({id, username, email}) => {
    return(
      <div key={id}>
        <p>{username}</p>
        <p>{email}</p>
        <br></br>
      </div>
    )
  })

In this case I am fetching all the Users from my database, returning “Loading…” while in process, “Error :(“ if something goes wrong and then the actual presentation of the data once the promise is returned. This is a simple case with no arguments, but it shows just how easy it is to access the data you want. Change your gql code to include only the information you want and that’s what you’ll get, no extra data you don’t need!

I loved GraphQL on the backend, but now that I’ve seen how it can be used with the Apollo Client library, I’m even more impressed. It is a seamless way to access only the data you need/want for each page while still caching/updating the information. Next week I will look into using variables and GraphQL mutations using Apollo. Hope you’re enjoying this as much as I am!