mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 08:13:56 +10:00
006b732edb
## Description
**Fixes issues with mismatching state between document steps.**
For example, editing a recipient and proceeding to the next step may not
display the updated recipient. And going back will display the old
recipient instead of the updated values.
**This PR also improves mutation and query speeds by adding logic to
bypass query invalidation.**
```ts
export const trpc = createTRPCReact<AppRouter>({
unstable_overrides: {
useMutation: {
async onSuccess(opts) {
await opts.originalFn();
// This forces mutations to wait for all the queries on the page to reload, and in
// this case one of the queries is `searchDocument` for the command overlay, which
// on average takes ~500ms. This means that every single mutation must wait for this.
await opts.queryClient.invalidateQueries();
},
},
},
});
```
I've added workarounds to allow us to bypass things such as batching and
invalidating queries. But I think we should instead remove this and
update all the mutations where a query is required for a more optimised
system.
## Example benchmarks
Using stg-app vs this preview there's an average 50% speed increase
across mutations.
**Set signer step:**
Average old speed: ~1100ms
Average new speed: ~550ms
**Set recipient step:**
Average old speed: ~1200ms
Average new speed: ~600ms
**Set fields step:**
Average old speed: ~1200ms
Average new speed: ~600ms
## Related Issue
This will resolve #470
## Changes Made
- Added ability to skip batch queries
- Added a state to store the required document data.
- Refetch the data between steps if/when required
- Optimise mutations and queries
## Checklist
- [X] I have tested these changes locally and they work as expected.
- [X] I have followed the project's coding style guidelines.
---------
Co-authored-by: Lucas Smith <me@lucasjamessmith.me>
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
import type { QueryClientConfig } from '@tanstack/react-query';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { httpBatchLink, httpLink, splitLink } from '@trpc/client';
|
|
import { createTRPCReact } from '@trpc/react-query';
|
|
import SuperJSON from 'superjson';
|
|
|
|
import { getBaseUrl } from '@documenso/lib/universal/get-base-url';
|
|
|
|
import type { AppRouter } from '../server/router';
|
|
|
|
export { getQueryKey } from '@trpc/react-query';
|
|
|
|
export const trpc = createTRPCReact<AppRouter>({
|
|
overrides: {
|
|
useMutation: {
|
|
async onSuccess(opts) {
|
|
await opts.originalFn();
|
|
|
|
if (opts.meta.doNotInvalidateQueryOnMutation) {
|
|
return;
|
|
}
|
|
|
|
// Invalidate all queries besides ones that specify not to in the meta data.
|
|
await opts.queryClient.invalidateQueries({
|
|
predicate: (query) => !query?.meta?.doNotInvalidateQueryOnMutation,
|
|
});
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export interface TrpcProviderProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function TrpcProvider({ children }: TrpcProviderProps) {
|
|
let queryClientConfig: QueryClientConfig | undefined;
|
|
|
|
const isDevelopingOffline =
|
|
typeof window !== 'undefined' &&
|
|
window.location.hostname === 'localhost' &&
|
|
!window.navigator.onLine;
|
|
|
|
if (isDevelopingOffline) {
|
|
queryClientConfig = {
|
|
defaultOptions: {
|
|
queries: {
|
|
networkMode: 'always',
|
|
},
|
|
mutations: {
|
|
networkMode: 'always',
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
const [queryClient] = useState(() => new QueryClient(queryClientConfig));
|
|
|
|
const [trpcClient] = useState(() =>
|
|
trpc.createClient({
|
|
transformer: SuperJSON,
|
|
|
|
links: [
|
|
splitLink({
|
|
condition: (op) => op.context.skipBatch === true,
|
|
true: httpLink({
|
|
url: `${getBaseUrl()}/api/trpc`,
|
|
}),
|
|
false: httpBatchLink({
|
|
url: `${getBaseUrl()}/api/trpc`,
|
|
}),
|
|
}),
|
|
],
|
|
}),
|
|
);
|
|
|
|
return (
|
|
<trpc.Provider client={trpcClient} queryClient={queryClient}>
|
|
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
|
</trpc.Provider>
|
|
);
|
|
}
|