Theo's Typesafe Cult•9mo ago

Unable to Retrieve Data from useMutation Call Despite Successful Internal Fetch

I'm encountering an issue with tRPC (mostly from my side as I'm a newbie with tRPC), where the useMutation query returns undefined for data when called with new input. However, the data is successfully retrieved internally, as confirmed by tRPC's debugging console itself, and an onSuccess call within the useMutation variable. I'm not sure how I can properly retrieve the data (as tRPC has been challenging for me to accommodate to :P), so I would appreciate some help here Front-End

  // fetch data
  const dataMutation = api.post.queryByFilter.useMutation({
    onSuccess(data) {
      console.log("onSuccess: ", data);
    },
  });

  const fetchData = async () => {
    // set dates for query
    setMonthsBack(monthsBack + 1);
    const currentDate = new Date();
    currentDate.setMonth(currentDate.getMonth() - monthsBack);
    const getMonth = (currentDate.getMonth() + 1).toString();
    const getYear = currentDate.getFullYear().toString();

    dataMutation.mutate({
      company: "google",
      month: getMonth.toString(),
      year: getYear,
    });

    console.log("Fetch Data: ", dataMutation.data);

    // append to cardSets; not relevant for this example
    setCardSets([
      ...cardSets,
      { data: dataMutation, month: getMonth.toString(), year: getYear },
    ]);
    // increment page; not relevant for this example
    setPage(page + 1);
  };

  // fetch data
  const dataMutation = api.post.queryByFilter.useMutation({
    onSuccess(data) {
      console.log("onSuccess: ", data);
    },
  });

  const fetchData = async () => {
    // set dates for query
    setMonthsBack(monthsBack + 1);
    const currentDate = new Date();
    currentDate.setMonth(currentDate.getMonth() - monthsBack);
    const getMonth = (currentDate.getMonth() + 1).toString();
    const getYear = currentDate.getFullYear().toString();

    dataMutation.mutate({
      company: "google",
      month: getMonth.toString(),
      year: getYear,
    });

    console.log("Fetch Data: ", dataMutation.data);

    // append to cardSets; not relevant for this example
    setCardSets([
      ...cardSets,
      { data: dataMutation, month: getMonth.toString(), year: getYear },
    ]);
    // increment page; not relevant for this example
    setPage(page + 1);
  };

Back-End

  queryByFilter: publicProcedure
    .input(
      z.object({
        company: z.string(),
        month: z.string(),
        year: z.string(),
      }),
    )
    .mutation(({ input, ctx }) => {
      const { company, month, year } = input;

      const startDate = new Date(`${year}-${month}-01`);
      const endDate = new Date(`${year}-${month}-31`);

      return ctx.db.spottings.findMany({
        where: {
          company: company,
          date: { gte: startDate, lte: endDate },
        },
        orderBy: { date: "desc" },
      });
    }),

  queryByFilter: publicProcedure
    .input(
      z.object({
        company: z.string(),
        month: z.string(),
        year: z.string(),
      }),
    )
    .mutation(({ input, ctx }) => {
      const { company, month, year } = input;

      const startDate = new Date(`${year}-${month}-01`);
      const endDate = new Date(`${year}-${month}-31`);

      return ctx.db.spottings.findMany({
        where: {
          company: company,
          date: { gte: startDate, lte: endDate },
        },
        orderBy: { date: "desc" },
      });
    }),

1 Reply

ohsweetnuthinOP•9mo ago

bump

Gaming

Programming

Unable to Retrieve Data from useMutation Call Despite Successful Internal Fetch