redux-toolkit
redux-toolkit copied to clipboard
Server side rendering with getRunningOperationPromises
Hi
I've try to take a look at the ssr-experiment exemple here:
- https://github.com/JulienKode/ssr-experiments/pull/new/chore/demo
- https://codesandbox.io/s/naughty-robinson-47e9jt?file=/package.json
I've:
- added console log on
getRunningOperationPromises
- Create a fake long query (10s)
- try to fetch with few seconds of delay the two pages:
- http://localhost:3000/pokemon/ssr/bulbasaur
- http://localhost:3000/pokemon/ssr/beedrill
On the beedrill
fetch this is what I can see when displaying running promises:
{
"getPokemonByName(\"beedrill\")": {
"arg": "beedrill",
"requestId": "070QxaL_aSi7MV3VbQzDQ",
"queryCacheKey": "getPokemonByName(\"beedrill\")"
},
"getPokemonByName(\"bulbasaur\")": {
"arg": "bulbasaur",
"requestId": "FdsRw3PmBbDP5sR7-kKPe",
"queryCacheKey": "getPokemonByName(\"bulbasaur\")"
}
}
- Is it normal that we are waiting for
bulbasaur
when our page are just concern aboutbeedrill
? - Should the
runningPromises
created in the api be unique to each page and not sharing across different page ? otherwise on large scale apps this could be an issue if we are waiting for the queries of another page - Does the
runningPromises
should be isolated to each page on SSR ? - like
createListenerMiddleware
should we have acreateApiMiddleware
? Then on server side, we can have a different middleware instance for each page that does not share values
This is the debug line that I've added in redux:
function getRunningOperationPromises() {
console.warn("[DEBUG] RUNNING OPERATION PROMISES ", {runningQueries})
console.warn(JSON.stringify(runningQueries, null, 2))
@phryneas @markerikson
Good observation - this should be scoped per store instance. Could be difficult though as it is outside of a middleware :thinking:
Could you give some feedback over in #2481 please?
@phryneas Thank you for taking care of it so quickly
This will still take some time until it makes in - we'll have to carefully weigh if and how we can break the existing implementation - since the new one would have to be dispatched
. I know the old api was just plain wrong, but we'll have to discuss this quite a lot.
You can isntall the PR-patched package from the CodeSandbox registry in the meantime though.
Marking this as done because it's in 1.9 beta.
Thank you @markerikson @phryneas