Useful Links:
- Retrieving metafields with the Storefront API
- Shopify GraphQL Admin API
- Shopify GraphQL Storefront API
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-metafieldswhich usesgraphql-requesttoupdateMetafieldStorefrontVisibilityof the exact metafield on a product. To runupdateMetafieldStorefrontVisibilitymutation docd plugins/gatsby-source-shopify-metafields && node lib.js.gatsby-source-shopifyit's an updated version of thedefault gatsby-source-shopifyplugin with editedqueries.js,nodes.jsandgatsby-node.jsfiles to include newly avialablemetafieldsfield.
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
falseback from the API when you actually neednull, and/or or you built the Gatsby site in one environment that assumed some kind of data would be present and now on a new Shopify site that data isn’t there yet. In this case, maybe no “Shopify__ProductMetafields” yet? What are you seeing in the GraphiQL interface? (localhost:8000/___graphql) – kennethormandy