How to refetch queries when the data are comming from the loader

I've a route where I load some fetch some data from react-query, however if I then do a mutaion and refetch that query it doesn't re-render the data in this component, I expect that the loader is only run on mount? How should I go about this?

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: Dashboard,

  loader: async ({ context: { queryClient, supabase } }) => {
    const jwt = await (supabase as SupabaseClient).auth
      .getSession()
      .then((session) => session.data.session?.access_token);
    console.log("jwt", jwt);
    return {
      activities: await queryClient.ensureQueryData(postsQueryOptions(jwt)),
      authToken: jwt,
    };
  },
});

function Dashboard() {
  const { activities, authToken } = Route.useLoaderData();

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: Dashboard,

  loader: async ({ context: { queryClient, supabase } }) => {
    const jwt = await (supabase as SupabaseClient).auth
      .getSession()
      .then((session) => session.data.session?.access_token);
    console.log("jwt", jwt);
    return {
      activities: await queryClient.ensureQueryData(postsQueryOptions(jwt)),
      authToken: jwt,
    };
  },
});

function Dashboard() {
  const { activities, authToken } = Route.useLoaderData();

TanStack•2y ago•

7 replies

moderate-tomato

How to refetch queries when the data are comming from the loader

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: Dashboard,

  loader: async ({ context: { queryClient, supabase } }) => {
    const jwt = await (supabase as SupabaseClient).auth
      .getSession()
      .then((session) => session.data.session?.access_token);
    console.log("jwt", jwt);
    return {
      activities: await queryClient.ensureQueryData(postsQueryOptions(jwt)),
      authToken: jwt,
    };
  },
});

function Dashboard() {
  const { activities, authToken } = Route.useLoaderData();

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: Dashboard,

  loader: async ({ context: { queryClient, supabase } }) => {
    const jwt = await (supabase as SupabaseClient).auth
      .getSession()
      .then((session) => session.data.session?.access_token);
    console.log("jwt", jwt);
    return {
      activities: await queryClient.ensureQueryData(postsQueryOptions(jwt)),
      authToken: jwt,
    };
  },
});

function Dashboard() {
  const { activities, authToken } = Route.useLoaderData();

How to refetch queries when the data are comming from the loader

Similar Threads

How to refetch queries when the data are comming from the loader

Similar Threads

Similar Threads

Similar Threads