Support react-router context #452
Conversation
…loader` result to deal with nested promises
|
@vladinator1000: Thank you for submitting a pull request! Before we can merge it, you'll need to sign the Apollo Contributor License Agreement here: https://contribute.apollographql.com/ |
|
|
@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. |
| expect(await page.getByText("loading...").count()).toBe(0); | ||
| }); | ||
|
|
||
| test("middleware", { tag: ["@react-router"] }, async ({ page }) => { |
There was a problem hiding this comment.
Same as the async loader test, just different endpoint.
|
|
||
| export const apolloContext = unstable_createContext<ApolloContext>(); | ||
|
|
||
| export function createApolloMiddleware( |
There was a problem hiding this comment.
Same as createApolloLoaderHandler, but sets the context value instead of making the user wrap their loader with another function.
| export const unstable_middleware = [apolloMiddleware] | ||
|
|
||
| export async function loader({ context }: Route.LoaderArgs) { | ||
| const apollo = context.get(apolloContext) | ||
| const queryRef = apollo.preloadQuery(DEFERRED_QUERY, { | ||
| variables: { delayDeferred: 1000 }, | ||
| }); | ||
|
|
||
| await new Promise((resolve) => setTimeout(resolve, 300)); | ||
|
|
||
| return { | ||
| queryRef, | ||
| }; | ||
| } |
There was a problem hiding this comment.
Feels quite clean to use.
| const client = makeClient(request); | ||
| const preloader = createTransportedQueryPreloader(client); | ||
| const preloadQuery: typeof preloader = (...args) => | ||
| replaceStreamWithPromiscade(preloader(...args)); |
There was a problem hiding this comment.
Since we're working in the browser here, and don't need to transport data from the server to the browser, it would be optimal if we could somehow use the same client instance that the React tree sees and use the normal createQueryPreloader of Apollo Client - see https://www.apollographql.com/docs/react/data/suspense#initiating-queries-outside-react
There was a problem hiding this comment.
Oh no, I mistook this as a feature only for client loaders. We might be getting some symmetry between server and client out of this in the end. Let's see.
|
Not closed intentionally, but I merged |
3 participants
Adds support for https://reactrouter.com/start/changelog#middleware-unstable
When @phryneas and I were discussing async loaders in #248 (comment) I had a feeling that context might feel really nice to use.