Learning React with Ben Awad — 08
From the last blog post, we saw that there is an issue while updating the name on the home page. To fix that we need to add update the cache mechanism. Let’s add the relevant packages for it.
yarn add @urql/exchange-graphcache
Now we need to add the
_app.tsx page. Make sure that
cacheExchange is coming from
@urql/exchange-graphcache . Now we need to have custom update. To do that add the
update property to
cacheExchange ‘s options. Inside the
Mutation Object it needs to match the names.
Here, type support is a bit lacking. So we are creating a helper function.
Now, instead of calling
updateQuery inside the
Mutation object we can use this function. We are adding cache update for every login and register. Once we replace the code, we will end up with the below code.
One thing we need to change here that we repeat that the user props all over the
graphql queries. So we are moving it to fragment.
Now we are going to add the Logout function. To do that we need to add the
logout mutation. In there we can use a request to destroy the session in the server and a response object to clear the cookie.
Now we are coping the GraphQL query and generate the types form the web app.
Here is the logout query from GraphQL Playground.
Then add this in the NavBar logout button.
Up to now, we are able to successfully removed the cookie but still, the cache is not updated. So let’s add a new mutation to
Now once we log out, the cache also set to
You can find the code from here.
Contribute to rasikag/reddit-clone development by creating an account on GitHub.
This example features how to use chakra-ui as the component library within a Next.js app. We are connecting the Next.js…
I will wrap up this post from here. If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.
That’s for today friends. See you soon. Thank you.
This article series based on the Ben Award — Fullstack React GraphQL TypeScript Tutorial. This is an amazing tutorial and I highly recommend you to check that out.