hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2025-01-07 08:13:18 +03:00
Code Issues Projects Releases Wiki Activity

storybook: fix lockup issue related to react-query invalidation

Browse Source 
PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9234
GitOrigin-RevId: 14beecb1626369f92362adb4d2c130b25ed53109
This commit is contained in:
Matthew Goodwin 2023-05-22 11:36:54 -05:00 committed by hasura-bot
parent 230e8a8cad
commit e51d1cf936
1 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/libs/console/legacy-ce/src/lib/storybook/decorators/react-query.tsx
View File

@ -1,28 +1,31 @@
import { DecoratorFn } from '@storybook/react'; import { Decorator } from '@storybook/react';
import { useEffect } from 'react'; import React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { QueryClient, QueryClientProvider, useQueryClient } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools'; import { ReactQueryDevtools } from 'react-query/devtools';
import useUpdateEffect from '../../hooks/useUpdateEffect';
export const ReactQueryDecorator = (): DecoratorFn => { export const ReactQueryDecorator = (): Decorator => {
const reactQueryClient = new QueryClient();
return Story => ( return Story => (
<QueryClientProvider client={reactQueryClient}> <ReactQueryProvider>
<QueryInvalidator />
<Story /> <Story />
<ReactQueryDevtools /> <ReactQueryDevtools />
</QueryClientProvider> </ReactQueryProvider>
); );
}; };
const QueryInvalidator = () => { // you can't use hooks directly in a Decorator function, so we need to encapsulate this in a component
const client = useQueryClient(); const ReactQueryProvider: React.FC = ({ children }) => {
useEffect(() => { let reactQueryClient = new QueryClient();
return () => {
client.invalidateQueries();
};
}, []);
return null; useUpdateEffect(() => {
// re-render happens only on story change or HMR. in those cases we want a fresh instance of the query client so we don't end up with stale cache
// invalidating queries is buggy due to async behavior and can cause storybook to lock up.
// so, this is the safest approach.
reactQueryClient = new QueryClient();
});
return (
<QueryClientProvider client={reactQueryClient}>
{children}
</QueryClientProvider>
);
}; };