Remix

[phryneas]

First the good news: streaming SSR with the suspense hooks and Remix works.

All the setup for that is in this diff: phryneas/remix-apollo-stream-example@bc43efe

That said, supporting loaders is another beast.
I'll add my thoughts in this thread.

[phryneas]

Thoughts on Loaders

Loaders run independently of React.

• on a SSR request, they run before streaming SSR happens in handleRequest.
  • as I understand it, they don't even need to run in the same process/host
• on later page navigation, they run on the server, but no more SSR happens

As a result, our current "inject into the stream" approach won't work - we have no way of sharing an AC instance reliably between handleRequest and loader, and oftentimes there's not even a handleRequest

=> each loader should create their own instance of Apollo Client and createQueryPreloader.

const loader = () => {
  const preload = createQueryPreloader(makeClient())

  const result1 = preload(query1)
  const result2 = preload(query2)

  return defer({
    result1,
    result2
  })
}

Now, right now preload creates a queryRef - that's hardly feasible in this case, since it can't be transported over the wire.

So we probably need to wrap createQueryPreloader (apollographql/apollo-client#11719) to have a completely different functionality in SSR.

It could create a value like

{
  query,
  variables,
  resultPromise
}

which would then be picked up by an (also wrapped) useReadQuery that would simulate an ongoing request (simulating the request start sooner would be great, but is probably not possible).

Currently, the defer implementation doesn't support promises that are not on the top level yet.

We'd probably need buy-in from the Remix team here to be able to make according changes on their side - once we have fleshed out this story more.

[LydiaF]

Hi @phryneas,

I was trying to get the transported data stored locally to the cache and I came up with below... It does do what I intend it to but I am wondering if this is how you would go about it.

Thanks for any direction :)

// makeClient.ts
import { HttpLink } from "@apollo/client/index.js";
import { ApolloClient, InMemoryCache } from "@apollo/client-react-streaming";
import { CachePersistor } from 'apollo3-cache-persist';

export const cache = new InMemoryCache()

const persistor =
  typeof window !== 'undefined'
    ? new CachePersistor({
        cache,
        storage: localStorage,
      })
    : null;

persistor &&
  persistor.restore().then(() => {
    // console.log('cache restored')
  });


export function makeClient() {
  return new ApolloClient({
    cache: typeof window === 'undefined' ? new InMemoryCache() : cache,
    link: new HttpLink({
      uri: "https://swapi-graphql.netlify.app/.netlify/functions/index",
    }),
  });
}

[phryneas]

@LydiaF It seems okay, although I would probably question if this is necessary at all - if you use this package to it's full extend, every page should bring their data to the cache anyways.

Also, you probably shouldn't be creating an ApolloClient outside of a makeClient function, there's a risk that you share data between different users in SSR if you do this on a module level.

I do wonder though, why are you posting this in the Remix issue? This doesn't seem to add to that topic.

[LydiaF]

Hi @phryneas, thank you for replying so quickly and for your help. I think I am okay now.

I think I was confused because I was still thinking in terms of how I used to do things -- I would look in Application local storage to see the cache data (as opposed to Apollo dev tools), and would also typically import the cache to do something like below as opposed to using useApolloClient. So I was lost as to how to call methods on the cache and then wrongly thought the data was somehow not really there.

// app/routes/_index.tsx
export default function Index() {
  const client = useApolloClient();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
      <h1>Welcome to Remix</h1>
      <button
        onClick={() => {
          client.cache.updateQuery({ query: ALL_FILMS }, (data) => ({
            allFilms: {
              __typename: "FilmsConnection",
              films: [],
            },
          }));
        }}
      >
        Press Me
      </button>
      <Suspense fallback="loading">
        <Suspended />
      </Suspense>
    </div>
  );
}

As for posting here, apologies, I probably should have asked in the repo you made.

Thanks again!

[harryblam]

Hi @phryneas - I came across this issue whilst trying to get the Apollo @defer functionality working with my remix loader function.

From what I can see, it seems that the Remix SSR and Apollo's @defer don't yet work together.

I can workaround by breaking my graph query up into the fast and slow parts like below, however that loses some of the simplicity of the having the Apollo @defer all in one query.

Am I missing any other way of getting Apollo @defer to work well in loaders? (we're using typescript client but I assume the same question applies to this repo)

export async function loader({ request }: LoaderFunctionArgs) {
  const fastPromise = getServerClient().query<DeferFastQuery>({
    query: DeferFastDocument,
  });
  const slowPromise = getServerClient().query<DeferSlowQuery>({
    query: DeferSlowDocument,
  });

  return defer({
    fast: fastPromise,
    slow: slowPromise,
  });
}

[phryneas]

Hi @harryblam!

We're currently working on an integration for React Router 7 that should work with defer in loaders.

You can install the current version via

npm i https://pkg.pr.new/apollographql/apollo-client-nextjs/@apollo/client-integration-react-router@419

and follow these instructions

https://github.com/apollographql/apollo-client-nextjs/blob/next/packages/react-router/README.md

As far as I know, React Router 7 is the successor to Remix, so I don't know if this is already applicable with old Remix setups - you would need to activate at least their "single fetch" behaviour.

I'd be happy to hear feedback :)

[harryblam]

We're currently working on an integration for React Router 7 that should work with defer in loaders.

thanks for getting back @phryneas! Good to know about React Router 7, are you guys also working on that integration over at the https://github.com/apollographql/apollo-client repo?

[phryneas]

@harryblam all the streaming SSR implementations for different frameworks will live in this repo for now, as React still doesn't provide us the primitives to create a framework-agnostic solution. But we should probably rename this repo at some point 😅

[coolbaluk]

Hi @phryneas, thank you for all the hard work on this.

I've picked up from @harryblam and done the upgrade to React Router 7 and gave the above a try but I'm hitting some snags.

Here's a simple loader I'm testing with:

export const loader = apolloLoader()(({ preloadQuery }) => {
  const myQueryRef = preloadQuery(DeferQueryDocument, {
    fetchPolicy: "network-only",
  });

  console.log(">>>loader", myQueryRef);

  return { myQueryRef };
});

export default function Index() {
  const { myQueryRef } = useLoaderData<typeof loader>();

  console.log(">>>queryRef", myQueryRef);

  const { data } = useReadQuery(myQueryRef);

  return <div>Hello {JSON.stringify(myQueryRef)}</div>;
}

As soon as I get to calling

const { data } = useReadQuery(myQueryRef);

I get this error: Expected a QueryRef object, but got something else instead.

The object as logged seems okay though:

>>>loader {
  '$__apollo_queryRef': {
    options: {
      query: 'query DeferQuery{teapotByID(id:"teapon_1"){id ...@defer{worldDeferred{world}}}}',
      fetchPolicy: 'network-only'
    },
    queryKey: '322a51c3-c952-49f6-b486-8d6a123c91b8',
    stream: ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
  }
}

And client side:

Package versions are:

"@apollo/client": "3.13.1",
"@apollo/client-integration-react-router": "0.12.0-alpha.1",
"react-router": "7.2.0",
"react": "18.3.1",

And an additional question: how do you have an async loader with this pattern ? e.g. if I need to await a call before calling preloadQuery

[coolbaluk]

An update:

It seems to break when directly hitting my /test route as defined above.

Navigating from / to /test in-app seems to not throw the error and the defer response works.

I will dig into if we are doing something before hitting the route that might be causing it.

[coolbaluk]

An additional update:

If I wrap it in a suspense I can catch the error and it does resolve and defers properly, but still logs the expected QueryRef error.

<Suspense fallback={<div>Loading deferred data...</div>}>

Also, here's the issue I'm hitting with async:

If I define the loader as async so I can await something inside, like our token:

export const loader = apolloLoader()(async ({ preloadQuery, request }) => {
  const accessToken = await getAccessToken(request);
  const myQueryRef = preloadQuery(DeferQueryDocument, {
    fetchPolicy: "network-only",
  });
  console.log(">>>loader", myQueryRef);
  return { myQueryRef };
});

I hit a hydration error I haven't been able to go figure out either:

Hydration failed because the initial UI does not match what was rendered on the server.

[phryneas]

Yeah, the async might be a problem, I noticed that a few days ago. I'm currently traveling, but once I'm back I'll try to look into this!

Apart from that, even non-async this doesn't look hydrated - did you add the HydrationHelper component around your app?

Something else that came up was mentioned here on Discord:
https://discord.com/channels/770287896669978684/1339289438110613614/1342965955352985622

I found the solution to the "Expected a QueryRef object, but got something else instead" assertion failure.

My app includes @apollo/client in Vite's noExternal config because it needs CommonJS transform. What resolved this crash was adding @apollo/client-react-streaming and @apollo/client-integration-react-router to noExternal as well. Might be good to include in the README and docs?

[coolbaluk]

You are spot on in both cases I think. The vite config changes seem to have helped and am now hitting the hydration error even without async

Using the helper indeed like so in root:

 <html lang="en" className={theme}>
      <head>
        <Meta />
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Links />
        <OurScripts webConfig={webConfig} />
      </head>
      <body className="min-h-[100dvh] bg-background text-foreground">
        <ApolloHydrationHelper>
          <Outlet />
        </ApolloHydrationHelper>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>

Enjoy your travels, will update if I make any further headway