Learning React with Ben Awad — 08

Photo by Efdal YILDIZ from Pexels

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.

Now we need to add the exchanges to createClient in _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 cacheExchange .

Now once we log out, the cache also set to null .

You can find the code from here.

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.

References:

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.

Full Stack Developer | AWS Associate Solution Architect | Skater