Feature/rtkq ssr

packages/toolkit/etc/rtk-query.api.md

@@ -19,6 +19,7 @@ export type Api<BaseQuery extends BaseQueryFn, Definitions extends EndpointDefin
             [K in keyof NewDefinitions]?: Partial<NewDefinitions[K]> | ((definition: NewDefinitions[K]) => void);
         } : never;
     }): Api<BaseQuery, ReplaceTagTypes<Definitions, TagTypes | NewTagTypes>, ReducerPath, TagTypes | NewTagTypes, Enhancers>;
+    ssr?: boolean;
 };
 
 // @public (undocumented)
@@ -58,6 +59,7 @@ export interface CreateApiOptions<BaseQuery extends BaseQueryFn, Definitions ext
     refetchOnMountOrArgChange?: boolean | number;
     refetchOnReconnect?: boolean;
     serializeQueryArgs?: SerializeQueryArgs<BaseQueryArg<BaseQuery>>;
+    ssr?: boolean;
     tagTypes?: readonly TagTypes[];
 }
 

packages/toolkit/src/query/apiTypes.ts

@@ -94,4 +94,5 @@ export type Api<
     TagTypes | NewTagTypes,
     Enhancers
   >
+  ssr: Record<string, any>
 }

packages/toolkit/src/query/createApi.ts

@@ -1,16 +1,12 @@
 import type { Api, ApiContext, Module, ModuleName } from './apiTypes'
 import type { BaseQueryArg, BaseQueryFn } from './baseQueryTypes'
-import type {
-  SerializeQueryArgs} from './defaultSerializeQueryArgs';
-import {
-  defaultSerializeQueryArgs
-} from './defaultSerializeQueryArgs'
+import type { SerializeQueryArgs } from './defaultSerializeQueryArgs'
+import { defaultSerializeQueryArgs } from './defaultSerializeQueryArgs'
 import type {
   EndpointBuilder,
-  EndpointDefinitions} from './endpointDefinitions';
-import {
-  DefinitionType
+  EndpointDefinitions,
 } from './endpointDefinitions'
+import { DefinitionType } from './endpointDefinitions'
 
 export interface CreateApiOptions<
   BaseQuery extends BaseQueryFn,
@@ -100,10 +96,10 @@ export interface CreateApiOptions<
   ): Definitions
   /**
    * Defaults to `60` _(this value is in seconds)_. This is how long RTK Query will keep your data cached for **after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache.
-   * 
+   *
    * ```ts
    * // codeblock-meta title="keepUnusedDataFor example"
-   * 
+   *
    * import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
    * interface Post {
    *   id: number
@@ -150,6 +146,10 @@ export interface CreateApiOptions<
    * Note: requires [`setupListeners`](./setupListeners) to have been called.
    */
   refetchOnReconnect?: boolean
+  /**
+   *  Defaults to `false`. This setting allows to enable query execution on the server
+   */
+  ssr?: boolean
 }
 
 export type CreateApi<Modules extends ModuleName> = {
@@ -196,6 +196,7 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
       refetchOnMountOrArgChange: false,
       refetchOnFocus: false,
       refetchOnReconnect: false,
+      ssr: false,
       ...options,
       tagTypes: [...(options.tagTypes || [])],
     }
@@ -233,6 +234,7 @@ export function buildCreateApi<Modules extends [Module<any>, ...Module<any>[]]>(
         }
         return api
       },
+      ssr: optionsWithDefaults.ssr ? {} : undefined,
     } as Api<BaseQueryFn, {}, string, string, Modules[number]['name']>
 
     const initializedModules = modules.map((m) =>

packages/toolkit/src/query/react/buildHooks.ts

@@ -501,6 +501,34 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
       })
 
       const promiseRef = useRef<QueryActionCreatorResult<any>>()
+      if (
+        typeof api.ssr === 'object' &&
+        !(
+          api.ssr[api.reducerPath] &&
+          api.ssr[api.reducerPath][name] &&
+          api.ssr[api.reducerPath][name][JSON.stringify(stableArg)]
+        )
+      ) {
+        // ssr mode is on and there is no promise yet
+        const promise = dispatch(
+          initiate(stableArg, {
+            subscriptionOptions: stableSubscriptionOptions,
+            forceRefetch: refetchOnMountOrArgChange,
+          })
+        )
+
+        if (!(typeof api.ssr[api.reducerPath] === 'object')) {
+          api.ssr[api.reducerPath] = {}
+          api.ssr[api.reducerPath][name] = {}
+        }
+
+        console.warn('ssr cache', {
+          ssr: api.ssr,
+          query: api.ssr[api.reducerPath][name][JSON.stringify(stableArg)],
+        })
+
+        api.ssr[api.reducerPath][name][JSON.stringify(stableArg)] = promise
+      }
 
       useEffect(() => {
         const lastPromise = promiseRef.current

packages/toolkit/src/query/react/getDataFromTree.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { Dispatch } from 'react'
+import type { AnyAction, Middleware, Store } from 'redux'
+
+export async function getDataFromTree(
+  storeFn: (middleWare: Middleware) => Store,
+  App: ({ store }: { store: Store }) => JSX.Element,
+  renderFn = renderToStaticMarkup
+) {
+  const middlewareControls = createQueryMiddleWare()
+  const store = storeFn(middlewareControls.middleware)
+  try {
+    await _getDataFromTree(middlewareControls, () =>
+      renderFn(<App store={store} />)
+    )
+  } catch (e) {
+    console.log(e)
+  }
+
+  return store
+}
+
+function createQueryMiddleWare() {
+  let resolve: ((v?: unknown) => void) | null = null
+  let reject: ((v?: unknown) => void) | null = null
+  let onQueryStarted: (querySet: Set<String>) => void = () => undefined
+
+  const state = {
+    pendingQueries: new Set<String>(),
+    renderComplete: false,
+    queryStarted: false,
+    promise: new Promise((res, rej) => {
+      resolve = res
+      reject = rej
+    }),
+  }
+
+  const timeout = setTimeout(() => {
+    reject?.()
+  }, 5000)
+
+  return {
+    renderStart: () => {
+      state.queryStarted = false
+      state.renderComplete = false
+    },
+    renderDone: () => {
+      state.renderComplete = true
+      state.promise = new Promise((res, rej) => {
+        resolve = res
+        reject = rej
+      })
+
+      if (state.pendingQueries.size === 0) {
+        resolve?.()
+      }
+    },
+    onQueryStarted: (callback: (querySet?: Set<String>) => void) => {
+      onQueryStarted = callback
+    },
+    middleware: () => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
+      const result = next(action)
+
+      if (typeof action.type === 'string') {
+        if (action.type.endsWith('executeQuery/pending')) {
+          state.pendingQueries.add(action.meta.requestId)
+          onQueryStarted(state.pendingQueries)
+        } else if (
+          action.type.endsWith('executeQuery/fulfilled') ||
+          action.type.endsWith('executeQuery/rejected')
+        ) {
+          state.pendingQueries.delete(action.meta.requestId)
+          if (state.renderComplete && state.pendingQueries.size === 0) {
+            clearTimeout(timeout)
+            resolve?.()
+          }
+        }
+      }
+      return result
+    },
+    state,
+  }
+}
+
+async function _getDataFromTree(
+  middlewareControls: ReturnType<typeof createQueryMiddleWare>,
+  renderFn: () => void
+): Promise<any> {
+  let queryStarted = false
+  middlewareControls.onQueryStarted(() => (queryStarted = true))
+  middlewareControls.renderStart()
+  renderFn()
+  middlewareControls.renderDone()
+  await middlewareControls.state.promise
+
+  if (queryStarted) {
+    return _getDataFromTree(middlewareControls, renderFn)
+  }
+}

packages/toolkit/src/query/react/index.ts

@@ -1,5 +1,6 @@
 import { coreModule, buildCreateApi, CreateApi } from '@reduxjs/toolkit/query'
 import { reactHooksModule, reactHooksModuleName } from './module'
+import { getDataFromTree } from './getDataFromTree'
 
 import type { MutationHooks, QueryHooks } from './buildHooks'
 import type {
@@ -21,4 +22,4 @@ const createApi = /* @__PURE__ */ buildCreateApi(
   reactHooksModule()
 )
 
-export { createApi, reactHooksModule }
+export { createApi, reactHooksModule, getDataFromTree }

packages/toolkit/src/query/tests/getDataFromTree.test.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import { renderToString } from 'react-dom/server'
+
+import type { ReactNode } from 'react'
+import type { Middleware, Store } from 'redux'
+
+import { createApi, fakeBaseQuery, getDataFromTree } from '../react'
+
+import { configureStore } from '@internal/configureStore'
+
+describe('getDataFromTree walks the tree and collects the data in the store', () => {
+  const testApi = createApi({
+    baseQuery: fakeBaseQuery(),
+    endpoints: (build) => ({
+      withQueryFn: build.query({
+        queryFn(arg: string) {
+          return { data: `resultFrom(${arg})` }
+        },
+      }),
+    }),
+    ssr: true,
+  })
+
+  const storeFn = (middleware: Middleware) =>
+    configureStore({
+      reducer: { [testApi.reducerPath]: testApi.reducer },
+      middleware: (gDM) => gDM({}).concat([testApi.middleware, middleware]),
+    })
+
+  const QueryComponent = ({
+    queryString,
+    children,
+  }: {
+    queryString: string
+    children?: ReactNode
+  }) => {
+    const { data } = testApi.useWithQueryFnQuery(queryString)
+
+    if (!data) {
+      return null
+    }
+
+    return (
+      <div>
+        {JSON.stringify(data)}
+        <div>{children}</div>
+      </div>
+    )
+  }
+
+  const TestApp = ({ store }: { store: Store }) => {
+    return (
+      <Provider store={store}>
+        <QueryComponent queryString="top">
+          <QueryComponent queryString="nested" />
+        </QueryComponent>
+      </Provider>
+    )
+  }
+  it('resolves all the data', async () => {
+    const store = await getDataFromTree(storeFn, TestApp)
+
+    const html = renderToString(<TestApp store={store} />)
+
+    expect(html).toMatchInlineSnapshot(
+      `"<div>&quot;resultFrom(top)&quot;<div><div>&quot;resultFrom(nested)&quot;<div></div></div></div></div>"`
+    )
+    expect(store.getState()).toStrictEqual({
+      api: {
+        config: {
+          focused: true,
+          keepUnusedDataFor: 60,
+          middlewareRegistered: true,
+          online: true,
+          reducerPath: 'api',
+          refetchOnFocus: false,
+          refetchOnMountOrArgChange: false,
+          refetchOnReconnect: false,
+        },
+        mutations: {},
+        provided: {},
+        queries: {
+          'withQueryFn("nested")': {
+            data: 'resultFrom(nested)',
+            endpointName: 'withQueryFn',
+            fulfilledTimeStamp: expect.any(Number),
+            originalArgs: 'nested',
+            requestId: expect.any(String),
+            startedTimeStamp: expect.any(Number),
+            status: 'fulfilled',
+          },
+          'withQueryFn("top")': {
+            data: 'resultFrom(top)',
+            endpointName: 'withQueryFn',
+            fulfilledTimeStamp: expect.any(Number),
+            originalArgs: 'top',
+            requestId: expect.any(String),
+            startedTimeStamp: expect.any(Number),
+            status: 'fulfilled',
+          },
+        },
+        subscriptions: expect.any(Object),
+      },
+    })
+  })
+})