DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for My own realtime chat with react, graphql and postgresql [part 5 - Graphql playground]
David Alejandro QuiΓ±onez
David Alejandro QuiΓ±onez

Posted on

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.

Alt Text

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
  }
}

Enter fullscreen mode Exit fullscreen mode

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"}
Enter fullscreen mode Exit fullscreen mode

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.
Alt Text

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}}
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.