Js-buy-sdk: [1.0beta] client.fetchNextPage() gives TypeError

[danielpost]

I am trying to use fetchNextPage() to get the next page of products, but getting the following error:

TypeError: Cannot read property 'shop' of undefined
    at index.js:1998
    at Array.reduce (<anonymous>)
    at index.js:1997
    at <anonymous>

This is line 1997-1999 that is being referred to:

response.model = path.reduce(function (object, key) {
    return object[key];
}, response.model);

Here is my (reduced) use case:

const firstProduct = await client.product.fetchAll(1)
const secondProduct = await client.fetchNextPage(firstProduct)

firstProduct works fine, but secondProduct gives the TypeError.

Apologies if this is caused by my own mistake, I'm not 100% sure if I'm using the function correctly, and couldn't figure out what was causing the error based on the source code.

[minasmart]

Yep. this is an underlying issue in the graphql client. It's generating a next page query, but not actually re-declaring any of the variables used in the initial query. should have a fix out shortly.

[danielpost]

@minasmart awesome, thank you! If there is anything I can do to help please let me know.

[minasmart]

This is hopefully fixed in #435 through the fix added in https://github.com/Shopify/graphql-js-client/pull/99. As soon as #435 goes in, I'll release a new beta.

[minasmart]

v1.0.0-beta.3 has been released and should work. If there's an issue, please reopen.

[danielpost]

I hate to say it, but I'm getting the exact same error after upgrading:

TypeError: Cannot read property 'shop' of undefined
    at index.js:2017
    at Array.reduce (<anonymous>)
    at index.js:2016
    at <anonymous>

Is there anything I need to do besides upgrading that would solve it?

[minasmart]

I'm not able to reproduce this locally. Are you able to paste the errors hash that's returned from the request in your browsers network panel?

[danielpost]

Can you elaborate on how to do that? This is the response from the graphql query:

{
  "errors": [
    {
      "message": "Fragment ProductFragment was used, but not defined",
      "locations": [
        {
          "line": 1,
          "column": 267
        }
      ],
      "fields": [
        "query",
        "shop",
        "products",
        "edges",
        "node",
        "... ProductFragment"
      ]
    },
    {
      "message": "Variable $query is used by  but not declared",
      "locations": [
        {
          "line": 1,
          "column": 70
        }
      ],
      "fields": [
        "query",
        "shop",
        "products",
        "query"
      ]
    },
    {
      "message": "Variable $sortKey is used by  but not declared",
      "locations": [
        {
          "line": 1,
          "column": 86
        }
      ],
      "fields": [
        "query",
        "shop",
        "products",
        "sortKey"
      ]
    },
    {
      "message": "Variable $reverse is used by  but not declared",
      "locations": [
        {
          "line": 1,
          "column": 104
        }
      ],
      "fields": [
        "query",
        "shop",
        "products",
        "reverse"
      ]
    }
  ]
}

EDIT:
This is the response of the first query for reference:

{
  "data": {
    "shop": {
      "products": {
        "pageInfo": {
          "hasNextPage": true,
          "hasPreviousPage": false
        },
        "edges": [
          {
            "cursor": "eyJsYXN0X2lkIjoxMjgxNDAyOTgzNSwibGFzdF92YWx1ZSI6IjIwMTctMTAtMTAgMTg6MTA6MTUifQ==",
            "node": {
              "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzEyODE0MDI5ODM1",
              "createdAt": "2017-10-10T18:10:15Z",
              "updatedAt": "2017-10-10T18:19:49Z",
              "descriptionHtml": "Named after the English aviators of WWII, the Air-King was first introduced as one of the \u201clower-end\u201d timepieces in the Rolex family. Despite its price point, Rolex made no compromises with this model in terms of quality; it still features the Oyster case, bracelet, and an automatic movement (albeit not chronometer certified). Like a lot of Rolex watches, it became incredibly popular and remained in production for 60 years! It was re-introduced at Baselworld in 2016 with mixed reviews, but this vintage model still has our hearts.",
              "description": "Named after the English aviators of WWII, the Air-King was first introduced as one of the \u201clower-end\u201d timepieces in the Rolex family. Despite its price point, Rolex made no compromises with this model in terms of quality; it still features the Oyster case, bracelet, and an automatic movement (albeit not chronometer certified). Like a lot of Rolex watches, it became incredibly popular and remained in production for 60 years! It was re-introduced at Baselworld in 2016 with mixed reviews, but this vintage model still has our hearts.",
              "handle": "1987-rolex-air-king-precision-reference-5500",
              "productType": "",
              "title": "1987 Rolex Air-King Precision Reference 5500",
              "vendor": "Cordova Watch Company",
              "tags": [

              ],
              "publishedAt": "2017-10-10T18:10:15Z",
              "onlineStoreUrl": null,
              "options": [
                {
                  "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0T3B0aW9uLzE1NDM2MzU0MTg3",
                  "name": "Title",
                  "values": [
                    "Default Title"
                  ]
                }
              ],
              "images": {
                "pageInfo": {
                  "hasNextPage": false,
                  "hasPreviousPage": false
                },
                "edges": [
                  {
                    "cursor": "eyJsYXN0X2lkIjozMjQzOTE5MjY1MSwibGFzdF92YWx1ZSI6MX0=",
                    "node": {
                      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMzI0MzkxOTI2NTE=",
                      "src": "https:\/\/cdn.shopify.com\/s\/files\/1\/2367\/6537\/products\/947-RolexAirKing-A_1024x1024_6aaf28bc-e223-4dc7-8c24-dcb6d5ec0e80.jpg?v=1507659017",
                      "altText": null
                    }
                  },
                  {
                    "cursor": "eyJsYXN0X2lkIjozMjQzOTE5NDMxNSwibGFzdF92YWx1ZSI6Mn0=",
                    "node": {
                      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMzI0MzkxOTQzMTU=",
                      "src": "https:\/\/cdn.shopify.com\/s\/files\/1\/2367\/6537\/products\/947-RolexAirking-Lifestyle_1024x1024_eab6aaec-20c2-4525-8059-965b539b87e8.jpg?v=1507659020",
                      "altText": null
                    }
                  },
                  {
                    "cursor": "eyJsYXN0X2lkIjozMjQzOTE5NTY1OSwibGFzdF92YWx1ZSI6M30=",
                    "node": {
                      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMzI0MzkxOTU2NTk=",
                      "src": "https:\/\/cdn.shopify.com\/s\/files\/1\/2367\/6537\/products\/947-RolexAirKing-LOVE_1024x1024_405c2d4a-abc6-420b-9078-a31ce738ad08.jpg?v=1507659021",
                      "altText": null
                    }
                  }
                ]
              },
              "variants": {
                "pageInfo": {
                  "hasNextPage": false,
                  "hasPreviousPage": false
                },
                "edges": [
                  {
                    "cursor": "eyJsYXN0X2lkIjo1ODEwMzUwNzU5NSwibGFzdF92YWx1ZSI6MX0=",
                    "node": {
                      "id": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC81ODEwMzUwNzU5NQ==",
                      "title": "Default Title",
                      "price": "3100.00",
                      "weight": 0,
                      "available": true,
                      "image": null,
                      "selectedOptions": [
                        {
                          "name": "Title",
                          "value": "Default Title"
                        }
                      ]
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}

[minasmart]

The above is exactly what I needed. I think I tested this is too much isolation. I've found the issue. Should have another fix out shortly.

[blakewatson]

Yep same issue, except I'm gettingCannot read property 'node' of undefined.

[minasmart]

As I said above: working on a fix.

[minasmart]

This should all be resolved in v1.0.0-beta.4 which is being deployed in the next few minutes. Unfortunately, the graphql compiler and client both had issues that weren't persisting enough state across generated pagination queries. It all appears to be fixed now.

[DanWebb]

@minasmart Thanks for this, I'm seeing new pages of products pulling in now which is great but there seems to still be an issue with where the response is returned in "fetchNextPage".

The error I'm seeing the error "Uncaught (in promise) TypeError: Cannot read property 'products' of undefined"

I've traced this back to the following part of the "fetchNextPage" method:

      return this.send(query, variableValues).then(function (response) {
        response.model = path.reduce(function (object, key) {
          console.log(object, key);
          return object[key];
        }, response.model);

        return response;
      });

I added the console.log there to debug and it sends an output like this...

If I output path it gives me this array:

["node", "products", "node", "products", "node", "products", "node", "products", "node", "products", "node", "products", "node", "products", "node", "products", "node", "products"]

I don't have enough underlying knowledge to know if this is the fix or it's going to cause other issues down the line but if the path array is made unique i.e. ["node", "products"] then the response gets through and I can access the products using nextPageOfProducts.model.

In case the further context is helpful there's some info on how I'm running the code on issue #440

[minasmart]

ok. I know what I did wrong here. I think there's a variable scoping issue. I'll get this fixed this week. Thanks for finding these issues.

[minasmart]

@DanWebb, fixed in https://github.com/Shopify/graphql-js-client/pull/101.

Will go out in beta.5 of this library.

[minasmart]

v1.0.0-beta.5 is released, and includes the fix for this.

[psamsotha]

There still seems to be a problem (I'm using 1.0.2). The first call to this.client.fetchNextPage(products); seems to be ok. But with the next call, I am still seeing the same error

TypeError: Cannot read property 'shop' of undefined
    at index.js:2073
    at Array.reduce (<anonymous>)
    at index.js:2072
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4629)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
   ...

The following code reproduces the problem. I am not sure if the size I used (5) has anything to do with the problem, but I do not have enough products to test the default size of 20.

this.client = buildClient(config);
this.client.product.fetchAll(5).then((products1) => {
  console.log(products1);
  this.client.fetchNextPage(products1).then((results) => {
    let products2 = results.model;
    console.log(products2);
    this.client.fetchNextPage(products2).then((results) => {
      // never reaches here. Throws above error
      let products3 = results.model;
      console.log(products3);
    });
  });
});

Or am I just not using this correctly?

[ajeeshadressary]

I am following this url https://shopify.github.io/js-buy-sdk/

My code is :

import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'xxxxx.myshopify.com',
storefrontAccessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});

// Fetch all products in your shop
client.product.fetchAll().then((products) => {
// Do something with the products
console.log(products);
});

But i am getting an error: Cannot read property 'shop' of undefined.

[rizedr]

@minasmart I am still getting error in v1.2.0 with products fetched from a collection:

1. client.collection.fetchWithProducts(id) => products works, got 20 products
2. client.fetchNextPage(products) => products works, got 40 products
3. client.fetchNextPage(products) => products works, got 60 products
4. client.fetchNextPage(products) => error doesn't work anymore.

Uncaught (in promise) TypeError: Cannot read property 'node' of undefined
    at index.js:2073
    at Array.reduce (<anonymous>)
    at index.js:2072
    at <anonymous>

I think this issue should be reopened.

[minasmart]

I can’t reproduce this error locally. Are there any other details you can provide?

[rizedr]

@minasmart I've made create-react-app to demonstrate the issue. A deployed version is available to be seen here: http://shopify-next-page-bug.surge.sh/

Here is a repo that you can clone and reproduce the error locally: https://github.com/rizedr/shopify-fetchNextPage

Let me know if I can provide you more info.

With that being said, I think this issue should be opened or I can open a new issue, @minasmart your call.

[lisadreamer]

@minasmart Hi! I have similar issue. First time when I call fetchNextPage and pass previous products, it works fine. and i receive "nextPageOfProducts" which has data and model. (data has shop and then products with edges and pageInfo)

Im just new to these can u explain what should I pass into fetchNextPage next?if i pass for next call nextPageOfProducts.model (which seems having needed products to pass) it would give me an error: Cannot read property 'shop' of undefined. Apparently response.model in the fetchNextPage is undefined this time. maybe i pass wrong products?

im using "shopify-buy": "^1.0.2",

[rizedr]

@lisadreamer you should pass the list of products.

Opened a new issue #493 for the problem I've described.

[lisadreamer]

@rizedr ofc i pass list of products. when i pass to fetchNextPage list of products received from fetchAll or fetchQuery it works. but when i pass next time to fetchNextPage list of products received from fecthNextPage it gives an error.

[rizedr]

@lisadreamer are you passing the whole list of products [...initialProducts, ...nextProducts]? Or just the nextProducts? You need to pass the whole list.

[lisadreamer]

@rizedr i tried whole list, same error. "Cannot read property 'shop' of undefined".
inside of fetchNextPage() :

this.send(query, variableValues).then(function (response) {
response.model = path.reduce(function (object, key) {
return object[key];
}, response.model);
return response;
});

where path = ["shop", "products"] and response.model is undefined
=> shop of undefined

[rizedr]

@lisadreamer yeap, that is the issue that I've opened here: #493 for this version.