Building a simple Rick and morty character app with Graphql and Nextjs
Tags: nextjs, graphql, javascript
Published: 2021-09-10 05:43:47

In this blog we are going to see how to consume a GraphQL with Next.js by building an app which "Finds out" which Rick and Morty character the user is. 
For the graphql api we are going to use Rick and morty graphql api https://rickandmortyapi.com/graphql from  https://rickandmortyapi.com 
The purpose of this blog is to show how to consume the GraphQL api so we are not going to the detail of how GraphQL works . 

First lets create a new nextjs app with  
```javascript 
npx create-next-app who-are-you 
```
Now cd into the project directory , to start consuming GraphQL we will need to install graphql and @apollo/client 

```javascript
yarn add @apollo/client graphql 
```
Now goto pages/_app.js file . If there isn't one then create one 
the . File is going to look something like this 

```javascript 
import "../styles/globals.css";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://rickandmortyapi.com/graphql",
  cache: new InMemoryCache(),
});

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />{" "}
    </ApolloProvider>
  );
}

export default MyApp;
```
Here we created a new client with the url endpoint and a cache and passed it to the child components through a provider .

Lets create a folder called graphql at the root of the project and create a file called queries.js under this folder 
so the folder structure will be like this .
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suki6rvq6rcrfbst3mqx.png)
In the queries.js file , there will be the query to fetch a specific character with an id 
```javascript
import { gql } from "@apollo/client";

export const GET_CHARECTER = gql`
  query getCharecter($id: ID!) {
    character(id: $id) {
      name
      image
      episode {
        name
      }
      location {
        name
        dimension
      }
    }
  }
`;
```
So now as everything is in place it's time to query the api and the successful query would retrieve the character name , image , list of episode name that it appeared in and locations with name and dimension , for this we are going to use the useQuery hook 
```javascript
import { useQuery } from "@apollo/client";
import { GET_CHARECTER } from "../graphql/queries";
const randomId = (_) => parseInt(Math.random() * 671);
const { loading, error, data } = useQuery(GET_CHARECTER, {
   variables: {
     id: characterId,
   },
});
``` 
Now when the component mounts , useQuery() hook is going to query the GraphQL api with a random character id ( at the time of writing this blog there are 671 characters ). While the query is running , the loading state is going to be true otherwise false , so we can use it to show loading related stuff . If there is any error it is going to be set on the error state of the hook , and if everything is ok the data state will store the data after the query finishes .

so our component would look something like this 

```javascript
import { useQuery } from "@apollo/client";
import { useEffect, useState } from "react";
import { GET_CHARECTER } from "../graphql/queries";
import styles from "../styles/Home.module.css";

const randomId = (_) => parseInt(Math.random() * 671);

export default function Home() {

  const [characterId, setCharacterId] = useState(randomId());
  const { loading, error, data } = useQuery(GET_CHARECTER, {
    variables: {
      id: characterId,
    },
  });
  const [character, setCharacter] = useState();
  useEffect(() => {
    if (data) {
      console.log(data.character);
      setCharacter(data.character);
    }
  }, [data]);
  if(loading) return  <div className={styles.container}> loading...</div> ;
  return (
    <div className={styles.container}>
      You are
      {character && (
        <>
          <h2> {character.name} </h2>
          <img src={character.image} alt={character.name} />
        </>
      )}
      <button
        className={styles.try__again__btn}
        onClick={() => {
          setCharacterId(randomId());
        }}
      >
        {" "}
        try again
      </button>
    </div>
  );
}

```
the final product would be 
![1777946a-a66a-49c9-9664-dfcd39e0c59f](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe02yb0bqjwme7ncw4eu.gif)

here is the live link https://aistiak.github.io/who-are-you
you can find the source code here https://github.com/aistiak/who-are-you . 
A star on Github and your feedback about the article would be much would be much appreciated 💖 .And thank you for reading the article