I found out that this article about sign up with GraphQL and React was rather very complicated and long so I decided to split it into more granular howdy doody posts.
The final scheme of this how to make mini tutorial will be something like this:
A little bit theory
You probably heard about GraphQL now. In a short, it is a query language which provides a very detailed description of your data in your API. Basically, your code and types are your documentation. The problem of GraphQL is that it is only a language.
If you want to write something in it – the process it is rather slow and complicated. It does not provide you with what you would expect it would – query options. What do I mean by that?
Well, imagine that you would like to do some high-level API request with this form – select all users whose age is less than 20. GraphQL does not provide you with such a query from the start. You have to do it. That is what I meant by the slow – process.
Prisma – our saviour
Here goes a Prisma project and gives you a helping hand! Prisma could be described as a synergy of three products. It consists of a client, a migrate and a
The client is an auto-generated library – based on your data model. If you have a user type defined in your data model – prisma client would contain methods doing that high-level query I mentioned at the beginning, see this example.
Overall communication scheme looks something like the picture below. It may look complicated – but in reality, you just use it. All is solved for you and prepared. The best thing is that you have to set-up almost nothing. You read it right, no DB magic, no clients … nothing. Just type simple config and you are ready to go.
All is there, and it’s free
Yep, that is right. You can try all of this and it costs nothing. In this DIY project, I used the prisma cloud product. In its base tier is free (great for prototyping) and all is set for you. The only thing you must do is to register there. Of course, you can use your own server&db set-up and in that case, it is totally free (prisma content at least). Just install prisma via npm:
npm install -g prisma
and log into it
Now, the first thing we want to achieve is service creation in the prisma cloud. Be sure that you are in some empty directory and type:
This will initialize a remote service setup in your app.prisma.io cloud service. Be sure that you choose Don’t generate when asked about Prisma client though – for purposes of this “How to make – SignUp with GraphQL” project only. Otherwise feel free to generate the client whenever you’d like to. You should see something like this:
Now you just need to deploy the service
After the service deployment, you should see the accessible endpoint for the application usage – something like this: https://eu1.prisma.sh/darkeye/demo-signup-blog/dev. It is also visible in the provided prisma.yml configuration.
Now, create .env file in the root project directory and add there:
For this project .env files are ignored by git and you should store there all data you’d like to keep hidden from the world (like a secret to your prisma etc.). You may choose a different approach because .env files are not always preferred, but that is not for the scope of this project.
Wait a sec lazyprogrammer, no client?
For this project purposes, I’m choosing a
GraphQL bindings are minimal, auto-generated and schema-specific GraphQL clients. A GraphQL binding lets you talk to a GraphQL API by invoking auto-generated binding functions rather than manually constructing and sending HTTP requests.
Another possible way how to understand the prisma-bindings is that it is an auto-generated SDK for GraphQL APIs.
Now, another hero – graphql-yoga
As I wrote at the beginning. GraphQL is just a specification. After that, I introduced the Prisma project, which eases every interaction possible with the database. Now I will focus on the actual application server and its underlying components.
This will be rather short tough. I’m not trying to write that graphql-yoga is something small and easy to make. But its main strength is that for us, simple-minded users it is very convenient to just use it. Because it is really freaking easy to do so.
Now, the main reason you want to use yoga is that it can be seen as a wrapper. There are some tools & libraries that are commonly used by a community and could be understood as a standard in some way.
The thing is that the correct configuration and their integration can be rather bothersome. Yoga just wraps this all for you and just magic happens and you use it. Just to clarify – yoga or
What will be next?
This part was a little bit theoretical and somehow general. I bet most of you who will read this will know these projects and will be pretty much experienced with GraphQL already. But there is already somebody who solves these issues. If it is you my dear reader – then this article is for you. I hope I could help you somehow and you will continue with the next part 🙂
Next part will be more practical. I will set up a simple sign up
if you wonder who I’m, check my about page