Having the rick power!!! Pt.3
Tags: javascript, webdev, react, apollo
Published: 2021-07-31 18:53:24

Hello again!!! 🙌

Here I am, I've just open vscode, and the first thing I did was styling the container of the cards, now is amazing how it is!! (Maybe you don't like it, but I DO :)

## Table of Contents
1. [A bit of react-router](#bit-rrouter)
2. [Starting with Apollo](#apollo)
   1. [A little explanation](#little-explanation)
3. [Returning to the project](#project-return)

## A bit of react-router <a name="bit-rrouter"></a>

Then I did 'the change', I converted `App.jsx` into a Switch for Routes, using `react-router-dom`, which I have neves used, but is super simple!!

(Mini tutorial)
To use **React Router**, the first thing we have to do is install it :) of course... [docs](https://reactrouter.com/web/guides/quick-start)

`npm install react-router-dom`

Now that we have it installed, the first thing we have to do, is to say to React that we are using it!!! So we tell `index.js` (the one that is god, because it controls everything) to have something called `BrowserRouter`, which is like a `Route` but a bit special, because is the one that keeps a history.

Next step is to go to out `App.jsx` where we used to have all of our things. But now we have it as a Router for Routes. Okey okey... if you have not understand me, we have a `Switch` that has `Route`s which redirect to the component you want. So we have something like this ->

{% codesandbox 06k0m module=/src/App.jsx %}

So if you try to go to another path that is not `/` (home), you will be displayed `Error!!`. And why? Because when we used the `Switch`, we created a `Route` which has no path, when a `Route` has no path, it means that any other path will go to that one, so for example if we search: **/blitty** we will have the same error, or `OwO`, and so on.

But how do we do, if for example we want **/owo** to work?
Well.. that's pretty simple, we just create a new `Route` and we add the attribute `path="/owo"`, also `component={Component}`. And that's all!!! So we would have:

```jsx
<Switch>
   // other routes
   <Route exact path="/owo" component={Owo} />
</Switch>
```

And... what does `exact` mean???
It means that it will only match the _exact_ route, so for example, if we search for `/owo/uwu` we wouldn't get rendered the component `Owo`, only when `/owo`.

That's all for todays route, that is all I needed.

## Starting with Apollo <a name="apollo"></a>

We are f*... Okey no hahahahaa, that was a joke!!!!

We saw what **GraphQL** and **Apollo* was, now is time to touch it, so I'll come back... (well you will read this at the same time, but meh, I like doing this, is more... entertaining (?) wish so...).

Now that I have done the tutorial and an approach of fetching data from [rick and morty API](https://rickandmortyapi.com/documentation), is time to explain to you 👊.

Apollo is very very easy, first time I use it and I got everything!! (I'll give you the sandbox, but is the same one).

What I used was, `ApolloProvider`, `ApolloClient`, `useQuery`, `InMemoryCache` and `gql`. All from the library `@apollo/client` that you can install using:

`npm i @apollo/client`

+ So... what is this all about B?
- Well... you can go to the Docs :)

Nah, I am going to explain it!!! Don't worry!! I'll try it at least. (The [codesandbox](https://codesandbox.io/s/solitary-wood-06k0m?file=/src/apolloExample.jsx:113-127) is commented)

### » A little explanation <a name="little-explanation"></a>

[`ApolloProvider`](https://www.apollographql.com/docs/react/api/react/hooks/#the-apolloprovider-component) is like `useContext` of React, you can use it to access data from every component inside that _context_. So we use it to wrap components that (in this case) needs data from a GraphQL API, so they can access that data. It hhas one prop which is `client` that is important because is the object generated by `ApolloClient`.

[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient/#gatsby-focus-wrapper) is a class provided by Apollo Client, which we need to communicate to the GraphQL API. This class has a lot of arguments to use in the constructor, but the ones required, are `uri` or `link` (of course) that is the link ti the GrapQL API. And `cache` which is required, and is the cache that Apollo will use to store the fetch results.

[`InMemoryCache`](https://www.apollographql.com/docs/react/caching/overview/) is a type of cache provided by Apollo.

[`gql`](https://www.apollographql.com/docs/resources/graphql-glossary/#gql-function) a JavaScript template literal tag that parses GraphQL queries into an abstract syntax tree (AST). (I have copy the docs, because is very well explained)

[`useQuery`](https://www.apollographql.com/docs/react/data/queries/) is the way of fetching data, when we call this hook, we get a JSON with 3 keys: 
- `loading` which is a boolean that gives us information about the request, so, if the request is pending or loading, then the loading argument is `true`.
- `error` if the query was loaded and there was an error fetching or collecting the data, we are returned that error.
- `data` when it is loaded, and there is no error, we get the data (of the query we passed to the useQuery) in this key of the json.

So, it is very powerful, because we didn't really did something, and we have 3 states that we can easily use, to know how our fetch of the data has done.

## Returning to the project <a name="project-return"></a>

Since we want to fetch data from the component `Search` and `CardContainer`.
In `Search` to get the characters with the matched name, and in `CardContainer` to get 5 random characters.

So nice everything... I am not sure about giving `ApolloProvider` in `home.jsx`, which would be a destruction to my self from a lot of developers, thinkers and philosophers. Why I said that? IDK :)

But I think is the nice place for it, because we have both components which fetches data from the same GraphQL API, but with different queries. (If you think I am wrong, please explain to me).

I am going to code, I'll be right back.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/1VuZTjTISUvZGJ1Fih/giphy.gif" />

So... it has been just 30min, of doing it and thinking...
The main problem was that the `Client` I was creating, didn't let me use `.query` to test the queries, but now it works fine. I just changed the `require` with `import ... from ...`. Don't know why it happened, if you it, tell me in comments 🙏.

Then I added a lot of random, to get 5 random characters from the GraphQL API, every time you render.

The Loading or Error, are not pretty, I haven't even make nothing, just some `h3` hahahahahaha, but don't worry I'll chage it (if you are reading this and the changes have been applied... you are lucky :])

And this is all bby!!! Well, I didn't say it, but I created one folder called `apollo` where I have the `Client` and the `Queries`, so everything is separated and nice :)

Wish you like it!!! Here you have the source code [rick-power](https://github.com/blitty-codes/rick-power).

---

## Follow me or contact!
(I liked more the red bird :_()
🐦 [Twitter](https://twitter.com/blit12_)
🐙 [GitHub](https://github.com/blitty-codes)
👥 [LinkdIn](https://www.linkedin.com/in/blitty/)

---