Theo's Typesafe Cult•4mo ago

Using getStaticProps with TRPC (Fetching data via mutate)

Hi, I'm trying to do a TRPC fetch that requires a mutation (not possible to do a query, GET request not allowed) just once on a page. It would make sense to have it in getStaticProps, but I can't get it to work properly. Either the ssg helpers aren't recognized as with other fetch routes or trying to retrieve the data in a hook in the component leads to infinite mutates. I've left small notes in the codes to show as much. What would you say is the optimal way to handle this?

import { createServerSideHelpers } from "@trpc/react-query/server";
import { GetStaticProps, InferGetServerSidePropsType, InferGetStaticPropsType } from "next";
import superjson from "superjson";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
import { api } from "~/utils/api";

export const generateSSGHelper = () =>
  createServerSideHelpers({
    router: appRouter,
    ctx: { prisma, userId: null },
    transformer: superjson, // optional - adds superjson serialization
  });

export const getStaticProps: GetStaticProps = async (context) => {
  const cityName = context.params?.slug;
  const ssg = generateSSGHelper();
  // This line works because of the `prefetch` call in the `getStaticProps` of the page
  await ssg.city.getCityDataByName.prefetch({ name: cityName });
  //await ssg.routerThatRequiresMutation   << Intellisense says this doesn't exist either

  return {
    props: {
      trpcState: ssg.dehydrate(),
      cityName,
    },
  };
};

const SlugPage = (
  props: InferGetStaticPropsType<typeof getStaticProps>
) => {
  const { data: cityData } = api.city.getCityDataByName.useQuery({
    name: cityName as string,
  });

  // Calling fetchData will trigger the mutation infinitely
  const fetchData = api.apiRouterThatRequiresMutation.useMutation();

  return null;
};

export default SlugPage;

import { createServerSideHelpers } from "@trpc/react-query/server";
import { GetStaticProps, InferGetServerSidePropsType, InferGetStaticPropsType } from "next";
import superjson from "superjson";
import { appRouter } from "~/server/api/root";
import { prisma } from "~/server/db";
import { api } from "~/utils/api";

export const generateSSGHelper = () =>
  createServerSideHelpers({
    router: appRouter,
    ctx: { prisma, userId: null },
    transformer: superjson, // optional - adds superjson serialization
  });

export const getStaticProps: GetStaticProps = async (context) => {
  const cityName = context.params?.slug;
  const ssg = generateSSGHelper();
  // This line works because of the `prefetch` call in the `getStaticProps` of the page
  await ssg.city.getCityDataByName.prefetch({ name: cityName });
  //await ssg.routerThatRequiresMutation   << Intellisense says this doesn't exist either

  return {
    props: {
      trpcState: ssg.dehydrate(),
      cityName,
    },
  };
};

const SlugPage = (
  props: InferGetStaticPropsType<typeof getStaticProps>
) => {
  const { data: cityData } = api.city.getCityDataByName.useQuery({
    name: cityName as string,
  });

  // Calling fetchData will trigger the mutation infinitely
  const fetchData = api.apiRouterThatRequiresMutation.useMutation();

  return null;
};

export default SlugPage;

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Using getStaticProps with TRPC (Fetching data via mutate)