HTTP status 522 when fetching a room from the server

[haakonmt]

Description: Fetching a room from the server (loader or action) via HTTP request works fine locally, but fails consistently with a 522 HTTP status when deployed. I am not sure if this is a Remix-specific issue, but since I've only tried with this starter, and it's seemingly easy to reproduce I'll put it here, lmk if I should move it elsewhere.

Steps to reproduce:

1. Create a new Partykit app: npx create-remix@latest ./my-partymix-app --template partykit/remix-starter

2. Replace the loader in routes/_index.tsx with the following code:

   export async function loader() {
   const room = await PartySocket.fetch({
   host: PARTYKIT_HOST,
   room: "123",
   });
   
   if (!room.ok) {
   throw json({
     error: await room.text(),
   }, { 
     status: room.status
   });
   }
   
   return json({ partykitHost: PARTYKIT_HOST, room: await room.json() });
   }

3. Add the following handler to party/main.ts:

   onRequest() {
   return Response.json({ hello: "world" });
   }

4. Deploy the app, and watch it throw an error with the 522 HTTP status when you visit it. It works fine locally. I have deployed the exact code above here: https://522-demo.haakonmt.partykit.dev/

EDIT: It might be of importance that I'm located in Oslo, Norway, which CloudFlare currently lists as being re-routed, I'm not really sure what that implies:

[threepointone]

Sorry for the delay, I just saw this issue. What's happening here, is that cloudflare doesn't let you directly make requests to itself. Instead, we should use the parties object. I just added a commit to the starter that exposes the lobby that holds parties (as well as the ai/vectorize bindings) https://github.com/partykit/remix-starter/commit/0056ad53a7959fa51e2d711b7da5e804c56051a1 In your case, inside the loader you'd call context.lobby.parties.main.get('123').fetch() and it'll work. Closing this, sorry for the delay!