Learning React with Ben Awad — 07
At this point, we manage to register a user. Now once a user successfully registers, the user needs to redirect to the home page.
We start with adding useRouter from next/router . Then add the redirection to the home page.
router.push("/")In the original video that I follow up to now, got an error here. But maybe because of an update of the
ORMtool I didn’t get that. But at this point, it shows how to generate query manually. So let’s do it now.
First, we import the EntityManager from @mikro-orm/postgresql . Then we cast the em to EntityManager . The create the query and insert it. The complete query builder code something like this.
I need to highlight a few things here that once we use the getKnexQuery , it allows us to use all query operations. Another point is in our User entity has the property createdAt and mikroORM will add the underscore because of the CamelCase. But here we need to add it manually. Also, we are returning all the field from returning method.
So, we are all good at Register form and next, we move to complete the Login page. First, we need to add login.tsx file and login.graphql file. We can copy the code from register.tsx file and paste in there and make some modifications. Also, copy the login mutation from GraphQL Playground and modify it to have variables.
Then run the yarn gen command. It will generate the relevant functions in graphql.tsx file.
Important points that I need to highlight that it needs to pass the object that contains username and password. Because once we hover over login method, it is expecting a UsernamePasswordInput object.
...
const response = await login({ options: values });
...Now, we have a perfectly working Login page. Our next goal adding a NavBar to project. We can create a component and add it in there. Let’s do it now.
In here <NextLink /> is next.js implementation that supports client-side routing. Now we need to show that login and register links according to user login status. Also, we show the Username if the user logged in. Make sure to add this component to the Index component.
We get the data from me query. First, add a me query and use yarn gen to generate the functions.
Then fetch the data from NavBar .
const [{ data, fetching }] = useMeQuery();Recall with register check the difference here that we are using the first parameter that using data property and fetching status. Once we adding all the necessary things and try to logout by removing the cookie and again login and come to the main page. Maybe use will see your name will not update in there. It is because of the caching of urql . We will see what is the issue and fix that issue from my next blog post.
You can find the code base in here for these changes.
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.
