Theo's Typesafe Cult•4y 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

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>

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>