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

【问题标题】：gatsby ecommerce startkit + graphQL query issuegatsby 电子商务 startkit + graphQL 查询问题
【发布时间】：2019-11-15 15:12:09
【问题描述】：

我来自 React、Mongo、node、一点 SQL 和 Shopify 的背景（我掌握了大量的 JS）。

我遇到了这个 JAM 堆栈想法，它看起来很有趣，并决定尝试一下。我遇到了这个问题，坦率地说，在我看过所有 GraphQL tut 和我读过的文章之后，我似乎无法回想起来，我显然错过了一些重要的东西。

传统上，在 REST 后端中，您开发一个方案和您的端点，然后您向他们索要数据。

在this 介绍之后，我进入了查询 GraphQL 的部分，但如果不开发方案，我无法理解查询的内容或方式。使用此代码（使用测试产品/密钥设置条带后）

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>
    )}
  />
)

它说：

您可以验证您的查询并查看 GraphiQL 中返回了哪些数据，运行 npm run develop 时可在 http://localhost:8000/___graphql 获得。

在访问该区域时，我注意到查询设置和选项。这是我开发正在使用的查询的地方（或架构？）

有点迷失这种“联系”的样子。

按照完整教程并替换 API 密钥后，我收到此错误：

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

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

我的 gatsby 配置：

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

}

【问题讨论】：

您好 Robert，graphiQL 客户端是一个方便的地方，可以针对 gatsby 生成的 graphql 模式编写测试查询。通常很难知道数据的形状，因为这个过程是从用户那里抽象出来的。 GraphiQL 提供代码建议、类型名称等。一旦你得到你需要的，你可以将它复制到源文件中的实际查询中。你还可以在gatsby-node.js 中修改 Gatsby 生成的架构，使用这个api。
是什么阻碍了你，你遇到错误了吗？
@DerekNguyen 啊，谢谢您的澄清，我实际上收到了我刚刚添加到我的问题中的这个错误。在我按照教程并替换了所有 API 密钥等之后。
啊，我明白了，这意味着处理从 Stripe 获取数据的插件没有运行。您的gatsby-config 中有一个gatsby-source-stripe 条目，对吗？确保object 字段中有Sku，或者它没有看到 API 密钥，或者您的条带帐户尚未设置任何 SKU？
哦，看起来API是通过不同的环境加载的。会不会是您将 API 密钥添加到 .env.production 而不是 .env.development？

标签： javascript graphql stripe-payments gatsby

【解决方案1】：

当我遇到同样令人头疼的问题时，我才意识到这一点。

您必须创建条带式测试产品，而不仅仅是实时产品。确保您已在 Stripe 管理员中切换查看测试数据切换。然后创建您的产品。

如果仍然无法正常工作，您可能需要清除缓存和公用文件夹。

希望这会有所帮助。

【讨论】：

【解决方案2】：

对我来说，解决方案是将 STRIPE_PUBLISHABLE_KEY 添加到 .env.development 而不仅仅是 STRIPE_SECRET_KEY 本身（这是教程明确说明要做的）。一旦我添加了两者，构建错误就消失了，网站可以正常加载；我还看到 'allStripePrice' 在 GraphiQL 中显示为一个字段。所以配置应该采用这种形式：

# Stripe secret API key
STRIPE_PUBLISHABLE_KEY=pk_test_xyz
STRIPE_SECRET_KEY=sk_test_xyz

我已在 GitHub 存储库中将此作为文档 issue 提出，并提出了解决此问题的拉取请求。随意支持该问题。

【讨论】：