diff --git a/app/api/client.ts b/app/api/client.ts index b1b6bd380..3977be00d 100644 --- a/app/api/client.ts +++ b/app/api/client.ts @@ -65,6 +65,18 @@ export const queryClient = new QueryClient({ // don't have access to context export const apiQueryClient = wrapQueryClient(api.methods, queryClient) +/** + * Invalidate all cached queries for a given endpoint. + * + * Note that we only take a single argument, `method`, rather than allowing + * the full query key `[query, params]` to be specified. This is to avoid + * accidentally overspecifying and therefore failing to match the desired query. + * The params argument can be added in if we ever have a use case for it. + */ +export function invalidate(method: keyof typeof api.methods) { + queryClient.invalidateQueries({ queryKey: [method] }) +} + // used to retrieve the typed query client in components. doesn't need to exist: // we could import apiQueryClient directly everywhere, but the change is noisy export const useApiQueryClient = () => apiQueryClient diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx index 5b2134d40..1fd0ccc92 100644 --- a/app/pages/ProjectsPage.tsx +++ b/app/pages/ProjectsPage.tsx @@ -10,8 +10,9 @@ import { useCallback, useMemo } from 'react' import { Outlet, useNavigate } from 'react-router-dom' import { - apiQueryClient, + apiq, getListQFn, + invalidate, queryClient, useApiMutation, type Project, @@ -64,9 +65,7 @@ export function Component() { const { mutateAsync: deleteProject } = useApiMutation('projectDelete', { onSuccess() { - // TODO: figure out if this is invalidating as expected, can we leave out the query - // altogether, etc. Look at whether limit param matters. - apiQueryClient.invalidateQueries('projectList') + invalidate('projectList') }, }) @@ -77,11 +76,8 @@ export function Component() { onActivate: () => { // the edit view has its own loader, but we can make the modal open // instantaneously by preloading the fetch result - apiQueryClient.setQueryData( - 'projectView', - { path: { project: project.name } }, - project - ) + const queryOptions = apiq('projectView', { path: { project: project.name } }) + queryClient.setQueryData(queryOptions.queryKey, project) navigate(pb.projectEdit({ project: project.name })) }, },