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
Want results from more Discord servers?
Add your server