GraphQL course querying using GraphQL playground

If we open the port http://localhost:9000/ we are going to see the GraphQL playground.

Note: last GraphQL chapter was GraphQL course implementing a resolver function

We are going to see the GraphQL playground:

This tool is enabled by default by Apollo server and allow us to test our API directly from the browser.

The Docs is documentation generated by our GraphQL schema, so in our case is exposing the query greeting.

If we click in that query then we are going to see more information about that particular field, so in this case explain that the query will return data type string:

The cool thing for this tools is that permit us to make queries and to do that we use the left panel:

Now, the GraphQL queries are written in a special language the “query language”, so for write a query we need to use “query { }” and inside we can specify which fields we want to retrieve

In this case the playground is using the schema to see which queries are available.

So, let select the “greeting” query:

The results will be showing in the right side, and you can see how the result is inside in another object called “data”.

What’s the point of data? well this is because there is another node of the object called “error” so if we write a bad query name then we are going to see an error displayed instead of “data”, for example:

Nice, then if we write only { } without query then we are going to have the same results because is the same as using “query”:

Cool, now at the end this is re relation that exist with our query in the browser and our schema code:

By Cristina Rojas.