await fetch() in Remix loader function has suddenly started malfunctioning on CF Pages
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, usually in around 200ms 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']; } 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 1) 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. 2) 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.
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, usually in around 200ms 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']; } 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 1) 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. 2) 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.
0 Replies