All Printful Products Not Showing

[pythlang]

So, it looks like only a subset (the latest) of products created on Printful are displaying on this SPA.

Is this something you can explain? I'm not sure why this is happening and was hoping you could provide insight.

Thanks for the help.

[notrab]

Hey

Can you provide some further insight here? How have you tried to debug this so far? Have you tried fetching the products from the API directly? Have you tried logging to the console or page the products on the index page?

[pythlang]

I actually just found it now. I will try to log and provide more information.

[pythlang]

How would I page the products on the index page? I'm betting that would help.

I just did a rudimentary log and I really am only pulling 20 items (and variants) (there are ~41 distinct products).

[pythlang]

And just to be clear: I knew you were shuffling products, so once I stopped that, it appears that only the first 20 products on the Printful pages are displaying.

[pythlang]

Ok, I actually figured out the hard way that printful-request limits 20 items by default.

I was able to circumvent this by setting { limit: 50, offset: 0 } in the get requests (since I knew I had 50 items).

Now, the question is: how can I automatically pull ALL items without hardcoding the limit and paginate them accordingly?

[pythlang]

I guess that answers the quantity question, but alas, how to paginate?

[notrab]

Hey @pythlang

I'll try to find some time to create an example on this. If you search for Next.js pagination you should find a few examples, and you'll need to check with Printful if they have any offset/limit querystring properties you can use to get you started.

[pythlang]

Great, really appreciate you looking at this to get me going in a direction as I’m also new to NextJS. I really dig the SPA.

I will look into the NextJS examples; additionally, it doesn’t look like there are really any defined querystring props define. I only found out about the 100 limit from the response by trying -1 (grab the last item or just observe the unexpected behavior’s response).

We can mark as closed and I can open a pagination issue for guidance if I get stuck

[clarkhacks]

I'm having this same issue, but no matter what I've tried it's not working. After trying the above with setting different limits, the exact amount of products, and trying different combinations, nothing has worked if I go over 21. Server Error

TypeError: Cannot read properties of undefined (reading 'preview_url')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

src/components/Product.tsx (98:45) @ Product

   96 |   data-item-url={`/api/products/${activeVariantExternalId}`}
   97 |   data-item-description={activeVariant.name}
>  98 |   data-item-image={activeVariantFile.preview_url}
      |                                     ^
   99 |   data-item-name={name}
  100 | >
  101 |   Add to Cart

[clarkhacks]

TLDR; Having products ignored will cause issues. I've played around with my situation some more and wanted to give up the answer here.

I changed the image to something I could render as a fallback to investigate.

<button
          className="snipcart-add-item w-full md:w-auto transition flex-shrink-0 py-2 px-4 border border-[#db2777] hover:border-transparent shadow-sm text-sm font-medium bg-[#db2777] text-gray-100 focus:text-white hover:bg-blue-600 hover:text-white focus:bg-[#db2777] focus:outline-none rounded-md"
          data-item-id={activeVariantExternalId}
          data-item-price={activeVariant.retail_price}
          data-item-url={`/api/products/${activeVariantExternalId}`}
          data-item-description={activeVariant.name}
          data-item-image={previewURL}
          data-item-name={name}
        >
          Add to Cart
        </button>

const previewURL = activeVariantFile?.preview_url;

Which showed me the products causing the issues.