invalidate not rerunning loader
I'm having a weird issue, all the information i've found suggests it should work but it doesn't. I want to run the
The following page loads data and sends it to the form component, once the user saves some data I want to invalidate the data so it's reloaded. I do this as suggested by
loaderloader using router.invalidate()router.invalidate() but I can't get it to actually run the query again.The following page loads data and sends it to the form component, once the user saves some data I want to invalidate the data so it's reloaded. I do this as suggested by
router.invalidate()router.invalidate() from useRouter()useRouter() but nothing happens.import SchemaFormLoading from '@/components/SchemaForm/components/SchemaFormLoading';
import SchemaForm from '@/components/SchemaForm/SchemaForm';
import { newRegisterEntityToEntityName } from '@/queries/schemaform/useFetchSchema';
import fetchFormLegacyOptions from '@/queries/schemaform/useFetchSchemaLegacy';
import { registerPermissionCheck } from '@/utils/authenticationUtils';
import { useSuspenseQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_auth/omsorgsregistret/verksamhet/$id')({
beforeLoad: () => {
registerPermissionCheck({ register: 'omsorgsregistret', entity: 'verksamhet' });
},
component: RouteComponent,
validateSearch: (search) =>
search as {
id?: string;
newObject?: string;
options?: string;
newOrg?: boolean;
newOperation?: boolean;
},
loaderDeps: ({ search: { id, newObject, options, newOrg, newOperation } }) => ({
id,
newObject,
options,
newOrg,
newOperation
}),
context: ({ params, deps }) => ({
queryOptions: fetchFormLegacyOptions({
entityName: newRegisterEntityToEntityName('omsorgsregistret', 'verksamhet')!,
...deps,
id: params.id
})
}),
loader: async ({ context, params, deps }) => {
console.log('loader running');
const data = await context.queryClient.ensureQueryData(context.queryOptions);
return {
breadcrumb: data?.formData?.Name || params.id,
data,
props: {
formId: params.id,
formName: context.queryOptions.queryKey[1],
...deps
}
};
},
pendingComponent: () => <SchemaFormLoading />
});
function RouteComponent() {
const context = Route.useRouteContext();
const { props } = Route.useLoaderData();
const { data } = useSuspenseQuery(context.queryOptions) as any;
// useRouter().invalidate() is called in this component to refetch data after it's saved
// but loader is never run again
return <SchemaForm {...props} data={data} />;
}import SchemaFormLoading from '@/components/SchemaForm/components/SchemaFormLoading';
import SchemaForm from '@/components/SchemaForm/SchemaForm';
import { newRegisterEntityToEntityName } from '@/queries/schemaform/useFetchSchema';
import fetchFormLegacyOptions from '@/queries/schemaform/useFetchSchemaLegacy';
import { registerPermissionCheck } from '@/utils/authenticationUtils';
import { useSuspenseQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
export const Route = createFileRoute('/_auth/omsorgsregistret/verksamhet/$id')({
beforeLoad: () => {
registerPermissionCheck({ register: 'omsorgsregistret', entity: 'verksamhet' });
},
component: RouteComponent,
validateSearch: (search) =>
search as {
id?: string;
newObject?: string;
options?: string;
newOrg?: boolean;
newOperation?: boolean;
},
loaderDeps: ({ search: { id, newObject, options, newOrg, newOperation } }) => ({
id,
newObject,
options,
newOrg,
newOperation
}),
context: ({ params, deps }) => ({
queryOptions: fetchFormLegacyOptions({
entityName: newRegisterEntityToEntityName('omsorgsregistret', 'verksamhet')!,
...deps,
id: params.id
})
}),
loader: async ({ context, params, deps }) => {
console.log('loader running');
const data = await context.queryClient.ensureQueryData(context.queryOptions);
return {
breadcrumb: data?.formData?.Name || params.id,
data,
props: {
formId: params.id,
formName: context.queryOptions.queryKey[1],
...deps
}
};
},
pendingComponent: () => <SchemaFormLoading />
});
function RouteComponent() {
const context = Route.useRouteContext();
const { props } = Route.useLoaderData();
const { data } = useSuspenseQuery(context.queryOptions) as any;
// useRouter().invalidate() is called in this component to refetch data after it's saved
// but loader is never run again
return <SchemaForm {...props} data={data} />;
}const fetchFormLegacyOptions = (props: FetchLegacyFormParams) => {
return queryOptions<any, AxiosError, any, QueryKeys>({
queryKey: ['legacySchemaForm', props.entityName, props.id],
queryFn: () => fetchSchemaQuery(props),
enabled: true
});
};const fetchFormLegacyOptions = (props: FetchLegacyFormParams) => {
return queryOptions<any, AxiosError, any, QueryKeys>({
queryKey: ['legacySchemaForm', props.entityName, props.id],
queryFn: () => fetchSchemaQuery(props),
enabled: true
});
};
