1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use GraphiQL Spark to demo a GraphQL schema without an endpoint

    Nik GrafNik Graf
    graphqlGraphQL
    javascriptJavaScript

    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/

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.