Question

我来自React，Mongo，node，一些SQL和Shopify（在我的领导下有大量的JS）的背景。

我遇到了这个JAM堆栈想法，它看起来很有趣，因此决定尝试一下。我遇到了这个问题，坦率地说，在我看完所有的GraphQL tut和阅读过的文章之后，我似乎无法全神贯注，我显然错过了一些重要的事情。

传统上，您在REST后端中开发方案和端点，然后向他们询问数据。

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

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 development时可以在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-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

当我遇到同一个令人头疼的问题时，我才发现这一点。

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

如果仍然无法使用，则可能需要清除缓存和公用文件夹。

希望这会有所帮助。

Answer 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提出来，并提出了处理请求的Pull Request。随时支持该问题。

gatsby电子商务入门套件+ graphQL查询问题

2 个答案: