This Next.js 14 application showcases a proof-of-concept where React.js' streaming SSR infrastructure (Fizz) is being used in conjunction with GraphQL's @defer
and the Relay.js GraphQL client to stream deferred GraphQL responses and the components rendering them to a client, all while hydrating Relay.js' store correctly.
export const dynamic = "force-dynamic";
to disable Next.js' caching. (If this example were to use an actual network layer, the fetch call inside of it would also have to have { cache: "no-store" }
to disable Next.js' fetch
cache)useServerInsertedHTML
to insert script tags into the streamed HTML as Suspense boundaries unsuspend.window
object (scoped per query).window
object.ReplaySubject
, return that from the Relay FetchFunction
and write all the responses on the window
object to that ReplaySubject.push
method on the window's array and for each push
publish the pushed response through the ReplaySubject
.hasNext
property or it is false, we complete the ReplaySubject
and cleanup the resources on the window
object.All relevant pieces can be found in the /relay directory.
yarn
yarn dev