Theo's Typesafe Cult•2y ago

Re fetch an enabled tRPC query.

Hi, im running into an issue where I want to refetch a query that lists all users when a new user is added, but it only refetches when the query is disabled. this is some code I have for it.

//Queries
const createInvestor = trpc.admin.investors.createOne.useMutation();
const getInvestors = trpc.admin.investors.findMany.useQuery();

//button
<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    router.reload();
  }}>
  Add User
</button>

//Queries
const createInvestor = trpc.admin.investors.createOne.useMutation();
const getInvestors = trpc.admin.investors.findMany.useQuery();

//button
<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    router.reload();
  }}>
  Add User
</button>

I tried to do the button like this but for whatever reason it only works if i have the query disabled

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    getInvestors.refetch()
  }}>
  Add User
</button>

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    getInvestors.refetch()
  }}>
  Add User
</button>

Any help/suggestions on how to fix this would be greatly appreciated

5 Replies

barry•2y ago

you sure its not just you reloading before the changes happen because it doesnt happen in 0ms you should probably do it onsuccess and not immediately after

Forsto•2y ago

well yeah but i also did this:

const createInvestor = trpc.admin.investors.createOne.useMutation();
  const getInvestors = trpc.admin.investors.findMany.useQuery(undefined, {
    enabled: false,
    refetchOnWindowFocus: true,
    refetchOnMount: true,
    refetchOnReconnect: true,
  });

  getInvestors.refetch();

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    await getInvestors.refetch()
  }}>
  Add User
</button>

const createInvestor = trpc.admin.investors.createOne.useMutation();
  const getInvestors = trpc.admin.investors.findMany.useQuery(undefined, {
    enabled: false,
    refetchOnWindowFocus: true,
    refetchOnMount: true,
    refetchOnReconnect: true,
  });

  getInvestors.refetch();

<button
  onClick={async () => {
    await createInvestor.mutate({
      firstName,
      lastName,
      email,
    });

    await getInvestors.refetch()
  }}>
  Add User
</button>

and this worked

rocawear•2y ago

I think it should be something like that:

const createInvestor = trpc.admin.investors.createOne.useMutation({
    onSuccess: (data) => {    trpc.admin.investors.findMany.invalidate();
    }
  }));
  
const getInvestors = trpc.admin.investors.findMany.useQuery();

<button
  onClick={() => {
    createInvestor.mutate({
      firstName,
      lastName,
      email,
    });
  }}>
  Add User
</button>

const createInvestor = trpc.admin.investors.createOne.useMutation({
    onSuccess: (data) => {    trpc.admin.investors.findMany.invalidate();
    }
  }));
  
const getInvestors = trpc.admin.investors.findMany.useQuery();

<button
  onClick={() => {
    createInvestor.mutate({
      firstName,
      lastName,
      email,
    });
  }}>
  Add User
</button>

Forsto•2y ago

thank you so much, it works i guess if i just do a normal await it returns loading or something

barry•2y ago

what you dont await no

Gaming

Programming

Re fetch an enabled tRPC query.