Sorry, How to get Shopify latest version api 2021-07

Why i cannot query images in graphql , i am using fragment :

fragment ProductCard on ShopifyProduct {
  id
  title
  images {
    id
    altText
    gatsbyImageData(aspectRatio: 1, width: 640)
  }
  priceRangeV2 {
    minVariantPrice {
      amount
      currencyCode
    }
  }
  vendor
}

eventually i get the error
error Cannot query field "images" on type "ShopifyProduct". Did you mean "tags"? graphql/template-strings
gatsby-config.js:

require("dotenv").config()
module.exports = {
  siteMetadata: {
    siteTitle: "gatsby-starter-shopify",
    siteTitleDefault: "gatsby-starter-shopify",
    siteUrl: "https://shopify-demo.gatsbyjs.com",
    hrefLang: "en",
    siteDescription:
      "A Gatsby starter using the latest Shopify plugin showcasing a store with product overview, individual product pages, and a cart.",
    siteImage: "/default-og-image.jpg",
    twitter: "@gatsbyjs",
  },
  flags: {
    FAST_DEV: true,
  },
  plugins: [
   { resolve: "gatsby-source-shopify",
    options: {
      password: process.env.SHOPIFY_APP_PASSWORD,
      storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
      shopifyConnections: ["collections"],
      // salesChannel: process.env.SHOPIFY_APP_ID, // Optional but recommended
    },
  },
    `gatsby-plugin-sass`,
    'gatsby-plugin-postcss',
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    
]

};

I have just checked the project out added the store url and password everything is pulling through as expected but on reload I am getting the following runtime error:

Its also doing the same for the /search page and not returning any projects but is on the other pages.

Any ideas?

Can you please open the discussion section for this repo, it will really help a lot.

Thank you :)

I just forked the starter, followed the readme and I am having this issue.

Anyone experiencing the same issue?

On gatsby develop:

warn The GraphQL query in the non-page component "/path/products/index.jsx" will not be run.
Exported queries are only executed for Page components. It's
possible you're trying to create pages in your gatsby-node.js and that's failing for some
reason.

In the all products page only shows one product, but in the categories pages is working fine.

Hello I try to install de latest gatsby-source-shopify@latest to avoid the problem of installation with --legacy-peer-deps. Because if I install with --forceor --legacy Netlify cannot deploy my store and that's failed to the building phase.
But the other side of the problem, it's when I install [email protected] when I run my site that's don't work and the console return :

 ERROR #gatsby-source-shopify_111000  PLUGIN

Your credentials don't have access to a resource you requested



  Error: Operation gid://shopify/BulkOperation/2288678502575 failed with ACCESS_DENIED
  
  - create-operations.ts:188 completedOperation
    [cafe366]/[gatsby-source-shopify]/src/create-operations.ts:188:15
  
  - task_queues:95 processTicksAndRejections
    node:internal/process/task_queues:95:5
  
  - source-from-operation.ts:62 sourceFromOperation
    [cafe366]/[gatsby-source-shopify]/src/source-from-operation.ts:62:20
  
  - source-nodes.ts:56 Object.sourceNodes
    [cafe366]/[gatsby-source-shopify]/src/source-nodes.ts:56:5
  
  - api-runner-node.js:487 runAPI
    [cafe366]/[gatsby]/src/utils/api-runner-node.js:487:16
  

not finished source and transform nodes - 4.277s
not finished source shopify products - 4.183s

but with [email protected] that work fine.

the link of the project is here https://github.com/knupel/cafe366/tree/stan

I try to be clear, I hope I am !

I am not sure, if there is something wrong with my project. Or if this is just a development issue. But I am not able to reach the all Products page in my local project.

With the Gatsby 4.x update for this starter, the application now 404's in development mode if you press the back button in your browser after having submitted filters on the search archive page.

This is reproduced by:

1: Running gatsby develop

2: Selecting any method of filtering (so anything that adds URL parameters) on the archive at "/search".

3: Visiting a product page that is a result of this filtering.

4: Navigating back to the search archive with the browser back button.

This now gives you the Gatsby development 404 error message, which looks like this:

I noticed this, since I was trying to migrate a Gatsby 3.x.x Shopify application to v4 - and I can therefore confirm that this wasn't happening before the v4 update.

Tested with a clean clone of the main repo, with my own access tokens.

When booting this starter wile connected to a standard Shopify site, the following warning messages appear:

(...)/src/pages/search.jsx
115:9   warning  The 'productList' logical expression could make the dependencies of useEffect Hook (at line 127) change on every render. To fix this, wrap the initialization of 'productList' in its own useMemo() Hook  react-hooks/exhaustive-deps  
152:6   warning  React Hook React.useEffect has missing dependencies: 'fetchNextPage' and 'hasNextPage'. Either include them or remove the dependency array                                                                react-hooks/exhaustive-deps  
269:31  warning  React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead                                                                                                react-hooks/exhaustive-deps

A fresh install and config with a development shopify store fails 'npm run develop' with the above error

The following component from the product page template renders variants that are out of stock, in the select dropdown and allows you to add them to your cart.

What is the best way to resolve this?

Hi there,

I apologise if this a fairly newb question. However I'm wondering how my site built on the platform will maintain correct stock info when it fluctuates (by variant). I have tried pulling in variants and "availableForSale" data into the ProductCard graphql fragment as below:

export const query = graphql`
  fragment ProductCard on ShopifyProduct {
    id
    title
    slug: gatsbyPath(
      filePath: "/products/{ShopifyProduct.productType}/{ShopifyProduct.handle}"
    )
    images {
      id
      altText
      gatsbyImageData(aspectRatio: 1, width: 640)
    }
    priceRangeV2 {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    vendor,
    variants {
      availableForSale 
    }
  }
`

However this info doesn't seem to be updated when I then update the variants info on the Shopify site. Do I need to deploy a cron job to continually refresh data within /public/page-data to make sure variants info is constantly up to date? i.e. this product is or isn't sold out.

Getting a Cors issue that is causing a fetch error. Any way to add fetch options or 'Access-Control-Allow-Origin': '*',

import fetch from "isomorphic-fetch"
import Client from "shopify-buy"

const client = Client.buildClient(
  {
    domain: `sandbox-idrinkcoffee-com.myshopify.com/api/2021-01/graphql.json`,
    storefrontAccessToken:  `MYTOKENKEY`,
  },
  fetch,
)

Using the Numeric Input component, you can add a quantity of an item to your cart that exceeds the inventory of the item.

For example, there might be 10 necklaces in stock but you're able to add 15 necklaces to your cart which then results in an 'Inventory Issues' page in the Shopify checkout:

Out of stock
Some items are no longer available. Your cart has been updated.

What is the best way to resolve this?

i am using the protected password of the store , I can't get the app password .
eventually i get this error :
ERROR #gatsby-source-shopify_111002

Received error 401 from Shopify: {"errors":"[API] Invalid API key or access token (unrecognized login or wrong password)"}

Error: Unauthorized

With this starter, the product description on the products' detail pages becomes unformatted, particularly the original bullet-list tags are gone, making the description unformatted. Just wondering if there's anything I might have missed.

One of the links in the README.md is pointing at an archived, deprecated README.md

This should be updated to point at the correct README.md

I tried to install Gatsby Cloud App in Shopify Partners. The Gatsby Cloud is not loading, the server is not responding. I was following Video from Youtube https://youtu.be/u_XwJ2rkrnI?t=903.

Answer from Shopify about Gatsby Cloud App in their Store:

_I know that you really want to install the Gatsby Cloud in Shopify yet based on the system, details for this app might be incomplete or missing because the developer needs to update their information. This application Gatsby Cloud is not yet fully registered here in Shopify the reason why as well there are no reviews and rates on the website.

Sorry for posting this here but I have no other chance! I hope you have a great day.

I was testing the variantForOptions when I find out it is always undefined so this line

always assign the second part (variant),

Checking Shopify documentation (here)[https://shopify.github.io/js-buy-sdk/product-helpers.js.html#line6] variant it is not what variantForOptions expect as the second argument but more an object like that

{
  size: "Small",
  color: "Red"
}

So maybe something like that can work and fix the issue

const productVariant = client?.product?.helpers?.variantForOptions(shopify, {
  [variant?.selectedOptions[0]?.name]: variant?.selectedOptions[0]?.value,
  [variant?.selectedOptions[1]?.name]: variant?.selectedOptions[1]?.value,
}) || variant;

If you wanna try it yourself just fork this repo and print the helpers with a console.

I am getting the following error:

failed Building static HTML for pages - 0.743s

 ERROR #95313 

Building static HTML failed for path "/products/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  69 |     sources: [],
  70 |   }
> 71 |   if (images.fallback) {
     |              ^
  72 |     cleanedImages.fallback = {
  73 |       ...images.fallback,
  74 |       srcSet: images.fallback.srcSet


  WebpackError: TypeError: Cannot read property 'fallback' of undefined
  
  - gatsby-image.server.tsx:71 
    gatsby-starter-shopify/src/components/gatsby-image.server.tsx:71:14
  
  - extends.js:3 
    [gatsby-starter-shopify]/[@babel]/runtime/helpers/extends.js:3:42
  
  - extends.js:2 
    [gatsby-starter-shopify]/[@babel]/runtime/helpers/extends.js:2:1
  
  - extends.js:13 
    [gatsby-starter-shopify]/[@babel]/runtime/helpers/extends.js:13:1
  
  - static-entry.js:263 
    gatsby-starter-shopify/.cache/static-entry.js:263:20
  
  - history.js:113 
    [gatsby-starter-shopify]/[@gatsbyjs]/reach-router/es/lib/history.js:113:1
  


error Command failed with exit code 1.

This is caused by some products not having images.

May be the issue belongs here: https://github.com/gatsbyjs/gatsby-source-shopify

Found a simple typo in /src/pages/cart.jsx at line 40:

For all of those cracking their head around why the Gatsby Shopify Starter demo or their own direct deployment of this repo doesn't allow successfully adding any product to the cart/checkout.

Here's the solution I found in Shopify Forum:

You need to published the product to the sales channel of your private app creating in Shopify Admin (screenshot).

In my case it was a private app called "Gatsby Tryout".

I will add a PR to include that in the documentation.

How can we add Variants, Add to Cart and Quantity Selector for Product Cards

Products are active and activated in both store and app’s channel, what gives?

Product link

I have entered the shopify storefront access token in .env

First of all: I am not sure, if the purpose of this starter is to actually provide all the functionality that this application appears to have on the surface - or if it is simply meant to be a PoC for interacting with the Shopify API in a Gatsby App. If the latter is more true, feel free to disregard this issue. I also just want to say, that I am grateful for all hard work that has been put into this project!

The current issues

The view rendered by pressing 'More Products' on "Type" archive pages introduces unclear behaviour:

The filtering of the products in the 'Search View' of the application, can become somewhat counter-intuitive if a category ("Type") archive page has been visited first (Where the 'More Products' was clicked to enter this view). Example:

In this state, all products are now filtered to only show products of the "Type" that we entered this search view from - yet, the only way to recognize this, is by inspecting the URL at this point in time - or by noticing, that the "Type" filter can now be cleared. In this (particular) case, perhaps we should instead enter a Search View, where the 'Automotive' "Type" filter is simply checked instead, and thus - can be unchecked so that all products can be displayed?

In my opinion, the current approach makes it unclear to the user what products are being shown. This also introduces the ability to add the same "Type" filter to a filtering of products twice, where the "Type" in question then, of course remains applied when unchecked. Example:

Submitting a search before entering this pre-filtered search view, breaks subsequent filtering:

I discovered this accidentially. The steps to reproduce this are:

1. Click 'All products' in the navigation menu, then 'More products' at the bottom of the page, and then enter a search directly in this view - or simply press the search icon in the navigation menu, and and enter a search in the view.

2. When a search has been entered, select any "Type" category in the navigation menu (Automotive, Baby, Home, etc.), and then press 'More products' at the bottom of the page.

The URL should now look something like this:

https://shopify-demo.gatsbyjs.com/search?c=eyJsYXN0X2lkIjo2NjM2MTM3NTEzMTQ0LCJsYXN0X3ZhbHVlIjoiQWVyb2R5bmFtaWMgQ29uY3JldGUgU2hpcnQifQ%3D%3D&p=clothing

Implying that a search string (seemingly, encoded?) is still being applied to the filtering - even though this is not the case. This, then in turn, breaks subsequent filtering of products while in this state, particularly through changing the dropdown filters (Relevance, Price, etc.). Example:

I feel that applying other filters while in this state also has broken the filtering for me in certain cases, but I cannot reproduce this currently.

I titled this as a "Suggestion" since, as I said - it is unclear to me whether or not the goal here is for this functionality to actually work.

Proposed labels: Bug, Enhancement

Shopify only free 14 days.
Is the any way to use data directly from products.csv ?
Or we need shopify.