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:
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
.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
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`,
],
}
I'm expecting to get clean build, instead, I get Invariant Violation: Encountered an error trying to infer a GraphQL type
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.
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.
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.
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:
Run gatsby clean
.
This is a node reference error in a cached file.
I had this problem:
To solve it, I did npm install gatsby-source-shopify
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With