Cloudflare integration test #458
Conversation
|
|
@vladinator1000 is attempting to deploy a commit to the Apollo Client - Next package - integration tests Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
@phryneas got another one for you 👀. This adds an integration test for Cloudflare Workers.
The idea is to check runtimes that don't support Node's pipeable stream API. I duplicated the existing React Router template and added comments to the files I changed. The most significant change is in entry.server.tsx, where I'm trying to get it to work with cross-platform streaming APIs.
The diff is a little noisy because I piggybacked on your async loader branch, so I'll wait before that's in before undrafting the PR, but I'm curious about your first opinions on the additions. What do you think?
| const abortController = new AbortController(); | ||
| setTimeout(() => { | ||
| abortController.abort(`Rendering exceed timeout of ${streamTimeout}ms`); | ||
| }, streamTimeout + 1000); | ||
|
|
||
| responseHeaders.set("Content-Type", "text/html"); | ||
|
|
||
| const stream = await renderToReadableStream( | ||
| <ApolloProvider client={client}> | ||
| <ServerRouter | ||
| context={routerContext} | ||
| url={request.url} | ||
| nonce={options?.nonce} | ||
| /> | ||
| </ApolloProvider>, | ||
| { | ||
| ...options, | ||
| signal: abortController.signal, | ||
| onError(error: unknown) { | ||
| responseStatusCode = 500; | ||
| console.error(error); | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| // BUG: I tried to port this over /integration-test/react-router/app/entry.server.tsx | ||
| // But it breaks with a hydration error if I manually set shouldWaitForAllContent = true. | ||
| // Ensure requests from bots and SPA Mode renders wait for all content to load before responding | ||
| // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation | ||
| const shouldWaitForAllContent = (userAgent && isbot(userAgent)) || routerContext.isSpaMode; | ||
|
|
||
| if (shouldWaitForAllContent) { | ||
| await stream.allReady; | ||
| } | ||
|
|
||
| return new Response(stream, { | ||
| headers: responseHeaders, | ||
| status: responseStatusCode, | ||
| }) | ||
| } |
There was a problem hiding this comment.
Tried to port https://github.com/apollographql/apollo-client-nextjs/blob/next/integration-test/react-router/app/entry.server.tsx
But it doesn't seem to work yet, because I expected to see "Queried in SSR environment", but got "Queried in Browser environment"
The bot waiting is also broken in the same way.
There was a problem hiding this comment.
I'd assume it might be better if you start with whatever template React Router has for cloudflare and then apply the changes from our setup instructions to that.
|
|
||
| export default { | ||
| fetch(request, env, ctx) { | ||
| return requestHandler(request, { |
| ssr: true, | ||
| presets, | ||
| future: { | ||
| unstable_viteEnvironmentApi: true, |
There was a problem hiding this comment.
Enables use of @cloudflare/vite-plugin in vite.config.ts
|
|
||
| export default defineConfig({ | ||
| plugins: [ | ||
| cloudflare({ viteEnvironment: { name: "ssr" } }), |
There was a problem hiding this comment.
Use the workerd runtime in development.
phryneas
force-pushed
the
pr/react-router-cloudflare-itest
branch
from
e16452a to
c46fa38
Compare
|
Heads up: I'm rebasing & force-pushing this to prevent an unrelated commit from making it in - please pull before you continue to work on this. If this causes you too much trouble, just force-push your version again, I can do this later, too. It just makes reviewing easier for me right now :) |
There was a problem hiding this comment.
Here it is @phryneas 👀
The one thing that confuses me is, when I go to http://localhost:3000/asyncLoader, why does the react-router-cloudflare display
While the react-router test shows
| "react": "^19.0.0", | ||
| "react-dom": "*", | ||
| "react-router": "^7.2.0-pre.3", | ||
| "react-router": "^7.4.0", |
There was a problem hiding this comment.
Update to React Router 7.4.0
| const userAgent = request.headers.get("user-agent"); | ||
| const client = makeClient(request); | ||
|
|
||
| const abortController = new AbortController(); |
There was a problem hiding this comment.
Ported over the timeout logic from the other react-router integration test. https://github.com/apollographql/apollo-client-nextjs/blob/next/integration-test/react-router/app/entry.server.tsx#L85
|
My day is coming to an end soon, but I hope I can get to this tomorrow - I'll also see if I can set up a cloudflare deployment so we can test this as a deployed integration test. |
2 participants
Adds an integration test for Cloudflare Workers. Useful to check if we run well on runtimes that don't support Node APIs such as
renderToPipeableStream.