gatsby ecommerce startkit + graphQL query issue – Shopify

I come from a background of React, Mongo, node, a bit of SQL and Shopify (ton’s of JS under my belt).

I came across this JAM stack idea and it seemed interesting and decided to try it out. I run into this problem that frankly I can’t seem to wrap my head around after all the GraphQL tut’s I’ve watched and articles I read, I’m clearly missing something important.

Traditionally in REST backend, you develop a scheme and your endpoints and then you ask them for the data.

Following this introduction, I get to the part where I query GraphQL, but I can’t understand what or how I’m querying without developing a scheme. Use this code (after setting up Strip with test product / key)

import React from "react"
import { graphql, StaticQuery } from "gatsby"

export default props => (
  <StaticQuery
    query={graphql`
      query SkusForProduct {
        skus: allStripeSku {
          edges {
            node {
              id
              currency
              price
              attributes {
                name
              }
            }
          }
        }
      }
    `}
    render={({ skus }) => (
      <div>
        {skus.edges.map(({ node: sku }) => (
          <p key={sku.id}>{sku.attributes.name}</p>
        ))}
      </div>
    )}
  />
)

It states:

You can validate your query and see what data is being returned in GraphiQL, which is available at http://localhost:8000/___graphql when running npm run develop.

Upon visiting this area, I noticed Query setup’s and options. Is this where I develop the query that I’m using (or the schema?)

Slightly lost as what this sort of ‘connection’ looks like.

After following the full tutorial and replacing API keys, I get this error:

GraphQL Error Encountered 1 error(s):
- Unknown field 'allStripeSku' on type 'Query'.

      file: /Users/robert/Software/bDev/evu/src/components/products/skus.js

My gatsby-config:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})


module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },

  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-stripe`,
    {
      resolve: `gatsby-source-stripe`,
      options: {
        objects: ["Sku"],
        secretKey: process.env.STRIPE_SECRET_KEY,
        downloadFiles: true,
      },
    },
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],

}