Liens utiles:
Récemment, Shopify a publié un moyen de récupérer des méta-champs avec l'API Storefront . Afin d'obtenir un accès en lecture aux méta-champs à partir de l' API Shopify GraphQL Storefront, nous devons ajouter les méta-champs à la liste blanche de l' API Admin de Shopify GraphQL .
J'ai créé 2 plugins locaux:
gatsby-source-shopify-metafields qui utilise graphql-request pour updateMetafieldStorefrontVisibility à updateMetafieldStorefrontVisibility du métafield exact sur un produit. Pour exécuter la mutation updateMetafieldStorefrontVisibility faites cd plugins/gatsby-source-shopify-metafields && node lib.jsgatsby-source-shopify est une version mise à jour du default gatsby-source-shopify avec les queries.js , nodes.js et gatsby-node.js pour inclure le champ de metafields nouvellement disponible. Après avoir exécuté updateMetafieldStorefrontVisibility j'ai pu interroger les métafields du produit à l'aide de curl :
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`,
],
}
Réponse: {"data":{"productByHandle":{"metafield":{"value":"true"}}}}
Pour reproduire l'erreur, veuillez cloner ce dépôt
Sur gatsby develop j'obtiens une Invariant Violation: Encountered an error trying to infer a GraphQL type erreur de 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
v2.5.2v11.14.0 gatsby-config.js :
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
}
}
}
'
Je m'attends à obtenir une construction propre, à la place, j'obtiens une Invariant Violation: Encountered an error trying to infer a GraphQL type
3 Réponses :
Exécutez gatsby clean . Il s'agit d'une erreur de référence de nœud dans un fichier mis en cache.
lancez simplement "gatsby clean" pour supprimer le fichier cache
C'est un message d'erreur assez courant que j'ai vu lors de l'utilisation d'autres plugins de point de terminaison GraphQL avec Gatsby, par exemple. le avec WordPress. Habituellement, cela signifie que vous obtenez quelque chose comme
falsede l'API lorsque vous avez réellement besoin denull, et / ou que vous avez construit le site Gatsby dans un environnement qui supposait qu'une sorte de données serait présente et maintenant sur un nouveau site Shopify que les données ne sont pas pas encore là. Dans ce cas, peut-être pas encore «Shopify__ProductMetafields»? Que voyez-vous dans l'interface GraphiQL? ( localhost: 8000 / ___ graphql )