Js-buy-sdk: Cant retrieve products (weird response bug)

[nimabrownlee]

Bug details

Describe the bug

const client = Client.buildClient({
  domain: 'shop.myshopify.com',
  storefrontAccessToken: '-'
})

Fetching products:
client.product.fetchAll().then(res => console.log(res)).catch(err => console.log(err))
And the response:

[
  type: {
    name: 'ProductConnection',
    kind: 'OBJECT',
    fieldBaseTypes: { edges: 'ProductEdge', pageInfo: 'PageInfo' },
    implementsNode: false
  }
]

To Reproduce
Steps to reproduce the behaviour:

1. Create NextJS project
2. Make own custom server with node/express or fastify
3. Use the sdk to fetch products

Expected behavior
Get the products in JSON format

Environment (please complete the following information):

• OS: MacOS
• Browser: Chrome
• SDK Version: 2.9.0

[nimabrownlee]

@spencercanner @rebeccajfriedman hey sorry for tagging you but is there any sort of doc that I can use? I've posted at the shopify community and no answers. Do you have to use graphql? Whats the issue? I really dont know how to debug this as I dont get any errors. This is the response from the api.

[stevenbrent]

I'm having this issue as well. The private app settings in Shopify are set correctly and the connection from the JS API works but I can't retrieve products from my collection. Just get the same response as above.

[alDuncanson]

@spencercanner @rebeccajfriedman hey sorry for tagging you but is there any sort of doc that I can use? I've posted at the shopify community and no answers. Do you have to use graphql? Whats the issue? I really dont know how to debug this as I dont get any errors. This is the response from the api.

Yes you have to use GraphQL. According to the docs here, under the Requirements section. They provide some good GraphQL resources here

[Mei152]

I am having this same issue. @alDuncanson why do you say we have to use GraphQL? I thought the point of the js-buy-sdk was to be a wrapper around graphQL so we can do everything in js. I am wondering if the interface changed and they have not updated the documentation yet.

[alDuncanson]

@Mei152 you still do everything in js, but the api is available in GraphQL. There is no REST api for Storefront.

What I did was:

import { graphql, buildSchema } from 'graphql'

// initialize graphql client (https://www.npmjs.com/package/shopify-buy)
const client = Client.buildClient({
  domain: <your-shopify-domain>,
  storefrontAccessToken: <your-access-token>
})

client.product.fetchAll().then(allProducts => {
      allProducts.map(productGraphModel => {

        const schema = buildSchema(`
          type Image {
            id: String,
            src: String
          }

          type Variant {
            id: String,
            title: String,
            price: String,
            weight: Float
          }

          type Query {
            id: String,
            title: String,
            description: String,
            handle: String,
            images: [Image],
            variants: [Variant]
          }
        `)

        const query = `{
          id
          title
          description 
          handle
          images {
            id
            src
          }
          variants {
            id
            title
            price
            weight
          }
        }`

        graphql(
          schema,
          query,
          productGraphModel
        ).then(queryResponse => {
          console.log(queryResponse)
        })
      })
    }).catch(error => {
      console.log(error)
      alert('Error fetching products')
    })

Obviously our schema and query shapes will be different but, this worked for me.

[Mei152]

@alDuncanson , thank you for the helpful reply. I was at my whits end trying to get something to work. Here is what I wound up doing:

 `let endpoint =
    'https://storenamehere.myshopify.com/api/2020-04/graphql.json';

  wretch()
    .url(endpoint)
    .headers({
      'X-Shopify-Storefront-Access-Token':  'token goes here',
      'Content-Type': 'application/json'
    })
    .json({
      query:
        'mutation checkoutCreate {checkoutCreate(input: {lineItems: [ do string interpolation of items array here ]}) {checkout {id webUrl}}}'
    })
    .post()
    .json(json => {
      console.log(json);
      this.checkout = json.data.checkoutCreate.checkout;
    });`

I ditched the js-buy-sdk. I like the wretch library for making requests. This is probably not the best solution, but at least it got me back to being productive. I will have to check out the graphql library you used! In case you are wondering, I am using the vuejs framework, and this.checkout = json.data.checkoutCreate.checkout; stores the checkout in the component's data.

Thanks again!

[vmenge]

Found a way to solve this issue. On the App configuration, disable and re-enable the storefront API access. This will give you a new Storefront access token. That was enough to make it work for me.

[hapiben]

@vmenge Thanks! That worked for me. :-)