gatsby 电子商务 startkit + graphQL 查询问题

Question

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`,
  ],

}

Answer 1

I just figured this out as I ran into the same head-scratching issue.

You have to create test products in stripe, not just live products. Make sure you've toggled the Viewing test data toggle in the Stripe admin. Then create your products.

You might need to clear your cache and public folders if it still isn't working.

Hope this helps.

Answer 2

For me the solution was to add STRIPE_PUBLISHABLE_KEY to .env.development and not just STRIPE_SECRET_KEY on its own (which is what the tutorial explicitly says to do). As soon as I'd added both, the build errors went away and the site could load up as normal; I also saw 'allStripePrice' appear as a field in GraphiQL. So the config should take this form:

# Stripe secret API key
STRIPE_PUBLISHABLE_KEY=pk_test_xyz
STRIPE_SECRET_KEY=sk_test_xyz

I've raised this as a documentation issue in the GitHub repo and made Pull Request that addresses it. Feel free to upvote that issue.