Not sending data to the client. #325
Description
I am trying to integrate this with
- vite
- vike
- https://github.com/brillout/react-streaming
It's almost working, my code looks like this:
import { WrapApolloProvider } from '@apollo/client-react-streaming'
import { buildManualDataTransport } from '@apollo/client-react-streaming/manual-transport'
import { useStream } from 'react-streaming'
import { renderToString } from 'react-dom/server'
import React from 'react'
export const WrappedApolloProvider = WrapApolloProvider(
buildManualDataTransport({
useInsertHtml() {
const stream = useStream()
if (!stream) {
return () => {}
}
return (callback: () => React.ReactNode) => {
const reactNode = callback()
const injectionsString = renderToString(reactNode)
console.log({ reactNode, injectionsString })
stream.injectToStream(injectionsString)
}
}
})
)Issue: the data is not sent to the client. The output of the console.log above is the following:
{
reactNode: {
'$$typeof': Symbol(react.transitional.element),
type: [Function: RehydrateOnClient],
key: null,
props: {},
_owner: null,
_store: {}
},
injectionsString: ''
}
{
reactNode: {
'$$typeof': Symbol(react.transitional.element),
type: [Function: RehydrateOnClient],
key: null,
props: {},
_owner: null,
_store: {}
},
injectionsString: '<script>(window[Symbol.for("ApolloSSRDataTransport")] ??= []).push({"rehydrate":{},"events":[{"type":"started","options":{"fetchPolicy":"cache-first","query":"query Dragons{dragons{name first_flight diameter{feet}launch_payload_mass{lb}}}","notifyOnNetworkStatusChange":false,"nextFetchPolicy":undefined},"id":"1"}]})</script>'
}
{
reactNode: {
'$$typeof': Symbol(react.transitional.element),
type: [Function: RehydrateOnClient],
key: null,
props: {},
_owner: null,
_store: {}
},
injectionsString: ''
}
{
reactNode: {
'$$typeof': Symbol(react.transitional.element),
type: [Function: RehydrateOnClient],
key: null,
props: {},
_owner: null,
_store: {}
},
injectionsString: '<script>(window[Symbol.for("ApolloSSRDataTransport")] ??= []).push({"rehydrate":{},"events":[{"type":"complete","id":"1"}]})</script>'
}
As you can see, the callback is called 4 times, but it produces only 2 script tags, with no data included.
