Retrieving a single collection is throwing an error

[snoori]

Hi,

I am learning to create an app and following a tutorial, I have created a code to fetch the details of a single collection. I am using the simple ID of a collection from the URL in products > collections. There are only two places where the code placed:

\web\index.js file:

//…

app.get(“/api/collections/299459805360”, async (_req, res) => {
try {
await shopify.api.rest.Collection.find({
session: res.locals.shopify.session,
id: 299459805360,
});
} catch (error) {
res.status(500).send(error);
}
});

//…

Then in the \web\frontend\components\ProductsCard.jsx:

console.log(“hello youtube again!”);

const fetchCollection = async () => {
try {
const response = await fetch(“/api/collections/299459805360”);
console.log(await response.json());
} catch (err) {
console.log(err);
}
};

fetchCollection();

That is all. The code is all correct but I get an error in the console:
GET https://once-serious-cards-portions.trycloudflare.com/api/collections/299459805360 524
SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON

I will really appreciate if someone could help me crack this so I can move on with creating this app.

[garyrgilbert]

if you want to get the collection as json then then you need to add .json at the end of the collection id.

Cheers,

Gary

[snoori]

Hi Gary,

It is not recognising the collection ID and throws out an error code 524. The collection ID is correct as per the URL (see https://admin.shopify.com/store/yellow-pixel-test/collections/299459805360). See the full error which is visible in the console (network tab) against the collection id 299459805360:

A timeout occurred Error code 524Visit cloudflare.com for more information.

2023-04-27 17:56:09 UTC

You### BrowserWorking

London### CloudflareWorking

janet-shower-ontario-switzerland.trycloudflare.com### HostError

What happened?

The origin web server timed out responding to this request.

What can I do?### If you’re a visitor of this website:

Please try again in a few minutes.

If you’re the owner of this website:

The connection to the origin web server was made, but the origin web server timed out before responding. The likely cause is an overloaded background task, database or application, stressing the resources on your web server. To resolve, please work with your hosting provider or web development team to free up resources for your database or overloaded application. Additional troubleshooting information here.

Cloudflare Ray ID: 7be8ee5e95ec88a3 • Your IP: Click to reveal 82.163.153.157 • Performance & security by Cloudflare

[garyrgilbert]

Hi there,

I am not logged into the shop so I will not be able to get access to the collection via that link, and the shop is password protected so I can view the collection via the normal way.

The ID may be correct, but if you want the json of the collection you have to add .json at the end.

https://admin.shopify.com/store/yellow-pixel-test/collections/299459805360.json

If you are getting a cloudflare error it may be that you are experiencing some issues in your region right now with shopify.

Cheers,

Gary

[snoori]

Hey Gary,

I have tested the URL with .json at the end (https://admin.shopify.com/store/yellow-pixel-test/collections/299459805360.json)) and it fetches the collection data in the browser but somehow the API is timing out and not responding.

Hence I am kind of stuck here and not sure how to proceed.

Cheers,

Sultan

[garyrgilbert]

Hey Sultan,

My best suggestion to you would be to go to postman.com and set up the request there. Make sure you add the authorization header to your request and see if what happens.

I quickly set up an exampe for you. I saved the accesstoken from the custom app I created on my dev shop as an environment variable for easier use later for other requests.

after running the request the result came in like.

Hope this helps you get it going.

Cheers

Gary