Shopify App instructions unclear about apps HOT 4 CLOSED

Hey @tunztunztunz,

the example query is actually fine.

Try removing allShopifyProductVariant and change the type of $productVariantIDs to [ID!]!.

The final query then looks like this

query MyQuery($productVariantIDs: [ID!]!) {
  nodes(ids: $productVariantIDs) {
    id
    ... on ProductVariant {
      sku
      image {
        src: originalSrc
      }
      title
      product {
        id
        title
      }
    }
  }
}

with variables being

{
  "productVariantIDs": [
    "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8zNjYwNzYyMjA4Mw=="
  ]
}

Shopify has a GraphQL playground for their Storefront API: https://shopify.dev/graphiql/storefront-graphiql
You can simply create your queries there by using the Explorer.

from apps.

Hey @tunztunztunz, we're closing this issue due to inactivity. Let us know if the solution above didn't fix your issue, and we'll re-open it.

from apps.

@andipaetzold @VaguelySerious This example is still very unclear. Do you have to hit the shopify storefront api directly from inside a component or can this be queried from the graphql data that is returned from the gatsby-source-shopify plugin? For example, I have a contentful content type called "Article" with a field for featured products where I use your app. In my gatsby-node.js file I dynamically build a page for each article and pass the article data from contentful as context. How would I get the correct JSON for the product from within the custom template file if I'm only given back the storefrontId from the app? Here is my gatsby-node.js file:

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const articles = await graphql(`
    query {
      allContentfulArticle {
        edges {
          node {
            id
            title
            featuredImage {
              title
              gatsbyImageData(
                placeholder: BLURRED
              )
            }
            featuredProduct // the field I use Shopify Contentful app to populate
            slug
            content {
              raw
            }
          }
        }
      }
    }
  `)
  articles.data.allContentfulArticle.edges.forEach(({ node }) => {
    createPage({
      path: `/articles/${node.slug}`,
      component: path.resolve(`./src/templates/article.js`),
      context: {
        article: node
      }
    })
  })
}

And here is the article.js template file:

const ArticleTemplate = ({ pageContext }) => {
  const { article } = pageContext;
  const content = documentToReactComponents(JSON.parse(article.content.raw));
  const featuredImage = getImage(article.featuredImage);
  return (
    <div>
      <h1>{article.title}</h1>
      {content}
      <GatsbyImage image={featuredImage} alt={featuredImage.title} />
      // would like to show featured products returned from app here, but I only have access to storefrontId
    </div>
  )
}

export default ArticleTemplate

How would I get the product data in article.js?

from apps.

The query I wrote above can be used when communicating directly with the Shopify Storefront API. For further questions on how to use the Shopify GraphQL API e.g. via gatsby-source-shopify, please reach out to the Shopify or Gatsby support or the maintainers of that package.

Contentful is integrating with Shopify by storing data from Shopify inside of Contentful, but we do not maintain the Shopify APIs or npm packages and therefore cannot provide good support for here.

from apps.