On a site on Cloudflare Pages that has been live for many months, the fetch() call to a graphql persisted query endpoint (a plain GET to return JSON) now MOSTLY seems to error, but sometimes returns the correct data.
fetch always works running locally
no code changes to the Remix app for months
CF Pages app uses Unbound functions
changing the CF pages build version or compatibilty date doesn’t affect issue
The CMS that serves the data has had updates, but loading the data uri in a browser always works, always returns status 200, usually in around 200-500ms
Code:
export let loader: LoaderFunction = async ({ params, request, context }) => {
const uri = params.page ? ‘/’ + params.page : ‘/’;
let data:any = {};
let res = null
try {
res = await fetch(getGraphqlEndpoint(context.CF_ENV) + '?queryId=page&variables={"path":"' + uri + '"}')
} catch (e) {
data.error = e;
}
if (res && res.ok) {
data = await res.json();
data = data[‘data’];
}
// for logging
data.response = res
return json(data, {
status: data.page ? 200 : 404,
});
};
If I console.log the data in the Remix default function from useLoaderData, and I can see that
- the data obj contains a response key which is an empty object. I think this means it didn’t catch an error, but also the response was empty.
- if I refresh 2 or 5 or 10 times, I’ll eventually get the correctly fetched json data logged and the page will load.
Any suggestions about what might be wrong with my use of fetch here, and a better approach?
I’ve tried changing to using ky with 25 retries for the data request, but I get the exact same result, except I can never actually get the data load after any number of manual reloads.
I feel like await isn’t working properly inside this async function on Cloudflare Pages anymore.