My own realtime chat with react, graphql and postgresql [part 5 - Graphql playground]

As we saw in the previous part, a playground interface has been deployed in our server url.

In this playground we can now check the schemas, queries, mutations and the typeDefs.

In the right section we have the Docs and the Schemas tabs.
The schemas show ... well, the secrets of the universe; and the docs shows us how to call the mutations, queries and subscriptions.

So let's run our first mutation, let's create an user.

mutation signUpUSer(
  $usr: String
  $name: String
  $password: String
  $type: String
) {
  signUpUser(usr: $usr, password: $password, name: $name, type: $type) {
    name
    usr
  }
}

This is the mutation we wrote in our backend, and the typed params we defined. The notation $ in those params allows us to use the Query Variables section, where we can define them as follows.

{"usr":"dalejan","name": "David","password": "1234","type": "none"}

If we run this mutation it should print the name and the username in the right section. We can also verify if our database is correctly saving the user.

In our Elephantsql instance, we can run SQL queries as follows.

If everything was ok running this query must return a single row: our new user!

You can experiment with this playground in order to understand how the rest of the mutations and queries work here.

Now i would like to focus in the realtime functionality, for this you have to create the createMessage mutation.

Once you have setted up this query, you can now create the subscription messageAdded as follows.

subscription {messageAdded{text,usr}}
```


If you run this subscription on the playground you'll see a `Listening` log in the right section. Now if we go back and run the `createMessage` mutation, and check the subscription log we can see the message added!

*Now our backend is ready.* 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p0jb4ly7mja7v875ocl6.gif)

In the next sections we'll be seeing how to implement a graphql client with react!