diff --git a/app/javascript/packs/application.tsx b/app/javascript/packs/application.tsx index 428c75c20d..e4523762d1 100644 --- a/app/javascript/packs/application.tsx +++ b/app/javascript/packs/application.tsx @@ -1,7 +1,7 @@ import 'regenerator-runtime/runtime'; import mountReactComponents from '../mountReactComponents'; -import { StrictMode, use, useMemo } from 'react'; +import { StrictMode, use, useEffect, useMemo, useState } from 'react'; import AuthenticityTokensManager, { getAuthenticityTokensURL } from 'AuthenticityTokensContext'; import { createBrowserRouter, RouterContextProvider, RouterProvider } from 'react-router'; import { buildBrowserApolloClient } from 'useIntercodeApolloClient'; @@ -14,24 +14,41 @@ import { } from 'AppContexts'; import { ClientConfigurationQueryData } from 'serverQueries.generated'; import { appRootRoutes } from 'AppRouter'; +import { ApolloClient, OperationVariables } from '@apollo/client'; const manager = new AuthenticityTokensManager(fetch, undefined, getAuthenticityTokensURL()); const refreshPromise = manager.refresh(); +const client = buildBrowserApolloClient(manager); export type DataModeApplicationEntryProps = { recaptchaSiteKey: string; railsDefaultActiveStorageServiceName: string; railsDirectUploadsUrl: string; + queryData?: ApolloClient.WriteQueryOptions[]; }; function DataModeApplicationEntry({ recaptchaSiteKey, railsDefaultActiveStorageServiceName, railsDirectUploadsUrl, + queryData, }: DataModeApplicationEntryProps) { use(refreshPromise); - const client = useMemo(() => buildBrowserApolloClient(manager), []); + const [queryPreloadComplete, setQueryPreloadComplete] = useState(false); + useEffect(() => { + if (queryData && Array.isArray(queryData)) { + for (const query of queryData) { + try { + client.writeQuery(query); + } catch { + // don't blow up if we get a malformed query + } + } + } + + setQueryPreloadComplete(true); + }, [queryData]); const clientConfigurationData = useMemo( () => ({ @@ -48,6 +65,7 @@ function DataModeApplicationEntry({ const router = useMemo( () => + queryPreloadComplete && createBrowserRouter( [ { @@ -67,14 +85,10 @@ function DataModeApplicationEntry({ }, }, ), - [client, clientConfigurationData], + [clientConfigurationData, queryPreloadComplete], ); - return ( - - - - ); + return {router && }; } mountReactComponents({ AppRoot: DataModeApplicationEntry });