Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GatsbyJS Invariant Violation: Encountered an error trying to infer a GraphQL type

Useful Links:

Recently Shopify released a way to retrieving metafields with the Storefront API . In order to get read access to metafields from Shopify GraphQL Storefront API we have to whitelist metafields from Shopify GraphQL Admin API.

I created 2 local plugins:

  1. gatsby-source-shopify-metafields which uses graphql-request to updateMetafieldStorefrontVisibility of the exact metafield on a product. To run updateMetafieldStorefrontVisibility mutation do cd plugins/gatsby-source-shopify-metafields && node lib.js.
  2. gatsby-source-shopify it's an updated version of the default gatsby-source-shopify plugin with edited queries.js, nodes.js and gatsby-node.js files to include newly avialable metafields field.

After running updateMetafieldStorefrontVisibility I was able to query product metafields using 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
    }
  }
}
'

Response: {"data":{"productByHandle":{"metafield":{"value":"true"}}}}

To reproduce the error please clone this repo

On gatsby develop I get Invariant Violation: Encountered an error trying to infer a GraphQL type error:

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

Environment

  • gatsby v2.5.2
  • node v11.14.0

File contents

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

I'm expecting to get clean build, instead, I get Invariant Violation: Encountered an error trying to infer a GraphQL type

like image 964
iamskok Avatar asked May 20 '19 19:05

iamskok


People also ask

Why am I getting so many errors in Gatsby develop?

Many errors you encounter will mean adjusting how you’ve configured a plugin or API in your site. This guide is meant as a reference for common errors that have tripped up other Gatsby users. Running a site in gatsby develop will set up a server locally that enables features like hot-module replacement.

Why does my Gatsby build look different when using CSS-in-JS?

Because gatsby develop doesn’t run server-side rendering, the build may look different if the plugin is not included to tell Gatsby to server-side render the styles for the CSS-in-JS solution being used.

Why is Gatsby’s image processing broken up into different packages?

neither any source plugins you are using nor your own implementation of the sourceNodes API are misconfigured Gatsby’s image processing is broken up into different packages which need to work together to source images and transform them into different optimized versions. You might run into these errors getting them to play together nicely.

Why can’t I select an image field in Gatsby?

Field “image” must not have a selection since type “String” has no subfields. Your site’s “gatsby-node.js” created a page with a component that doesn’t exist. Schema must contain uniquely named types but contains multiple types named “JSON”. The path passed to gatsby-source-filesystem does not exist on your file system:


2 Answers

Run gatsby clean. This is a node reference error in a cached file.

like image 126
shallow.alchemy Avatar answered Oct 23 '22 05:10

shallow.alchemy


I had this problem: enter image description here

To solve it, I did npm install gatsby-source-shopify

like image 1
Michelle Fernández Avatar answered Oct 23 '22 04:10

Michelle Fernández