有用的链接:

  • Retrieving metafields with the Storefront API
  • Shopify GraphQL Admin API
  • Shopify GraphQL Storefront API

  • 最近 Shopify 发布了一种 retrieving metafields with the Storefront API 的方法。
    为了从 Shopify GraphQL Storefront API 获得对元字段的读取访问权限,我们必须将 Shopify GraphQL Admin API 的元字段列入白名单。

    我创建了 2 个本地插件:
  • gatsby-source-shopify-metafields 使用 graphql-request 到产品上确切元字段的 updateMetafieldStorefrontVisibility。要运行 updateMetafieldStorefrontVisibility 突变,请执行 cd plugins/gatsby-source-shopify-metafields && node lib.js
  • gatsby-source-shopify 它是 default gatsby-source-shopify 插件的更新版本,其中编辑了 queries.jsnodes.jsgatsby-node.js 文件,以包含新可用的 metafields 字段。

  • 运行 updateMetafieldStorefrontVisibility 后,我可以使用 curl 查询产品元字段:

    curl -X POST \
    "https://shop-name.myshopify.com/api/graphql.json" \
    -H "Content-Type: application/graphql" \
    -H "X-Shopify-Storefront-Access-Token: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" \
    -d '
    query {
      productByHandle(handle: "nike-air-max-720") {
        metafield(namespace: "global", key: "free_shipping") {
          value
        }
      }
    }
    '
    

    响应:{"data":{"productByHandle":{"metafield":{"value":"true"}}}}
    要重现错误,请克隆 this repo

    gatsby develop 上,我收到 Invariant Violation: Encountered an error trying to infer a GraphQL type 错误:

    gatsby develop
    success open and validate gatsby-configs — 0.004 s
    success load plugins — 0.368 s
    success onPreInit — 0.006 s
    success initialize cache — 0.094 s
    success copy gatsby files — 0.045 s
    success onPreBootstrap — 0.006 s
    
    gatsby-source-shopify/new-dev-sandbox starting to fetch data from Shopify
    
    gatsby-source-shopify/new-dev-sandbox fetched and processed blogs: 274.471ms
    
    gatsby-source-shopify/new-dev-sandbox fetched and processed policies: 278.416ms
    
    gatsby-source-shopify/new-dev-sandbox fetched and processed productTypes: 406.051ms
    
    gatsby-source-shopify/new-dev-sandbox fetched and processed articles: 641.547ms
    
    gatsby-source-shopify/new-dev-sandbox fetched and processed collections: 754.319ms
    
    
    gatsby-source-shopify/new-dev-sandbox fetched and processed products: 1832.663ms
    
    gatsby-source-shopify/new-dev-sandbox finished fetching data from Shopify: 1848.663ms
    success source and transform nodes — 1.903 s
    warning Multiple node fields resolve to the same GraphQL field `ShopifyCollection.products` - [`products`, `products___NODE`]. Gatsby will use `products___NODE`.
    warning Multiple node fields resolve to the same GraphQL field `ShopifyProduct.metafields` - [`metafields`, `metafields___NODE`]. Gatsby will use `metafields___NODE`.
    error UNHANDLED REJECTION
    
    
      Error: Invariant Violation: Encountered an error trying to infer a GraphQL type for: `metafields___  NODE`. There is no corresponding node with the `id` field matching: "Shopify__ProductMetafield__und  efined,Shopify__ProductMetafield__undefined,Shopify__ProductMetafield__undefined,Shopify__ProductMe  tafield__undefined".
    
      - invariant.js:40 invariant
        [gatsby-shopify-invariant-violation-example]/[invariant]/invariant.js:40:15
    
      - add-inferred-fields.js:259 getFieldConfigFromFieldNameConvention
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/add-inferred-fields.js:25    9:3
    
      - add-inferred-fields.js:161 getFieldConfig
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/add-inferred-fields.js:16    1:19
    
      - add-inferred-fields.js:87 Object.keys.forEach.key
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/add-inferred-fields.js:87    :25
    
      - Array.forEach
    
      - add-inferred-fields.js:74 addInferredFieldsImpl
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/add-inferred-fields.js:74    :28
    
      - add-inferred-fields.js:38 addInferredFields
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/add-inferred-fields.js:38    :3
    
      - index.js:98 addInferredType
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/index.js:98:3
    
      - index.js:64 typesToInfer.map.typeComposer
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/index.js:64:43
    
      - Array.map
    
      - index.js:64 addInferredTypes
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/infer/index.js:64:23
    
      - schema.js:140
        [gatsby-shopify-invariant-violation-example]/[gatsby]/dist/schema/schema.js:140:11
    
      - Generator.next
    

    环境
  • Gatsby v2.5.2
  • 节点 v11.14.0

  • 文件内容
    gatsby-config.js :

    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-sharp`,
        {
          resolve: 'gatsby-source-shopify',
          options: {
            shopName: `${process.env.SHOPIFY_SHOP_NAME}`,
            accessToken: `${process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN}`,
            verbose: true
          }
        },
        {
          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`,
      ],
    }
    

    我期待得到干净的构建,相反,我得到了 Invariant Violation: Encountered an error trying to infer a GraphQL type

    最佳答案

    运行 gatsby clean
    这是缓存文件中的节点引用错误。

    关于javascript - GatsbyJS 不变违规 : Encountered an error trying to infer a GraphQL type,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56226824/

    10-13 04:54