GraphiQL Spark is convenience layer on top of GraphiQL allowing you to run queries or mutations completely client side. In addition the query/mutation response is rendered once GraphiQL is mounted, which makes it ideal for blog posts.

In this lesson we start from an empty create-react-app and add a GraphiQL Spark example.

You can find more examples of GraphiQL Spark at the documentation: https://nikgraf.github.io/graphiql-spark/

https://app.egghead.io/api/v1/lessons/graphql-use-graphiql-spark-to-demo-a-graphql-schema-without-an-endpoint/subtitles

Use GraphiQL Spark to demo a GraphQL schema without an endpoint

Instructor: [00:00] First, we need to install GraphQL Spark using Yarn at graphql-spark. Of course, you can also install it using MPM. Next up, we create the file and name it simple example.js. In there, we need to input three things, React, GraphQL Spark, and the GraphQL CSS.

[00:30] Although we haven't installed GraphQL, this will still work since GraphQL is a dependency of GraphQL Spark. Then we create our component, simple example. The component won't work, though. We need to choreograph GraphQL type definitions, resolvers and the query.

[00:51] Let's start with the type definitions and create a post with the title string. Then, we add the query type, allowing to query for a list of posts. Next up, we implement the resolver for the post query. The resolver should return two posts.

[01:17] Only one thing missing, the query. We create the query that retrieves the titles of all block posts, then we pass the type definitions, the resolvers, and the query to GraphQL Spark. Now, we can switch to app.js, import our simple example component, and use it.

[01:43] Make sure to also provide heights to the surrounding div to void GraphQL being horizontally squeezed. After refresh, we can see GraphQL shows up with the query array being executed. If we open the network tab, we can see that no network request to an API was involved to resolve the schema and return the data.

Use GraphiQL Spark to demo a GraphQL schema without an endpoint

Share this video with your friends