Open taki-tiler[bot] opened 1 month ago
finish
As we got our feet wet with REST, let's get started with GraphQL.
A little bit of context: GraphQL is a framework created by Facebook π that makes easier for create flexible and extensible server aplications.
GraphQL can be a little scary at the first sight, but don't worry, you'll get used to it. Here are some tutorials to help you to get started with GraphQL:
As we do with REST, let's make a GraphQL request using a tool called GraphiQL (no code yet, hang in there). You should download Graphiql app because it helps a lot to set headers on requests, or another app thar does the same, like GraphQL Playground. Once done, access https://template-onboarding-node-sjz6wnaoia-uc.a.run.app/graphql and you're good to go.
In GraphiQL, you'll have to make the login mutation. Fortunally, the GraphiQL contains the documentation explorer (tab on right) which shows how the queries and mutations should be used.
The test user for this login mutation is:
Email: admin@taqtile.com.br
Password: 1234qwer
finish
In the previous step you made a GraphQL query using the GraphiQL tool, right? For this step, we'll make the same query in your project (code time π).
In order to make GraphQL requests, we suggest the Apollo Client.
Once the library is installed, your job is to do the login mutation when the user presses the login button (which makes sense π€).
When you finish this step, your login screen should have the following behaviour:
If everything goes well with the login mutation, you should store the received token, which will be used in your latter GraphQL requests. When storing the token you can use any method you want to save this data, but remember that it should persist even if the user quits the application.
If you get an error with the login mutation, just show the error message you'll receive from server.
The error response you'll receive in this case will have in its structure:
{
"data": null,
"errors": [
{
"name": "a string",
"code": 500,
"message": "a string"
}
]
}
Step 1/5 - Network Communication
Estimated time: 15 minutes
REST
Network communication is a crucial part of any system nowadays. Here in Taqtile we use a framework called GraphQL, which you'll use thoughout this onboard.
But for now, in order to you understand what's happening under the GraphQL's hood, let's start with the (not so) old fashion way of doing network requests: The Representational State Transfer a.k.a. REST.
For this, we'll just make a REST request using a tool called Postman. It should be installed in your mac already (download here if it doesn't). You will perform a Login request very similiar to the one you coding in the next steps. Here are the parameters of your request:
Note 1: There's no code in this step! It's just a warming up for you to have some knowledge of what's going on inside the GraphQL. Be patient, young padawan. The code will come (in the next steps btw).
If your request succeed, you'll receive on body a JSON that looks like this:
Note 2: The Postman is just a suggestion. Feel free to use any other tool to make a REST request.