Having the rick power!!! Pt.3

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
2. Starting with Apollo
   1. A little explanation
3. Returning to the project

A bit of react-router

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

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 Routes which redirect to the component you want. So we have something like this ->

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:

<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

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, 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 is commented)

» A little explanation

ApolloProvider 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 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 is a type of cache provided by Apollo.

gql 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 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

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.

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.

---

Follow me or contact!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

---