Avraj
Avraj
PostsComments
TtRPC
Created by Avraj on 1/23/2024 in #❓-help
Is there a way to refetch a query with new parameters?
Hi I'm using tRPC in a Next.js app and I have a button that a user can click to get the latest data from the server. By default this data is cached in the server because the query is expensive. I've added an optional param/input in my query that looks like this: 
guilds: privateProcedure
    .input(
        z
            .object({
                skipCache: z.boolean().optional(),
            })
            .optional()
    )
    .query(async ({ input, ctx }) => {
        // Get data
    });
guilds: privateProcedure
    .input(
        z
            .object({
                skipCache: z.boolean().optional(),
            })
            .optional()
    )
    .query(async ({ input, ctx }) => {
        // Get data
    });
So when { skipCache: true } is set, the user can bypass the cache and get the latest data. I'm feeling a bit lost however when it comes to the implementation itself. I can't find anything in the docs regarding refetching with new/updated params. 
const trpcUtils = trpc.useUtils(); // This will return cached data from the server.

const { data: guilds, error } = trpc.private.guilds.useQuery();

const handleRefresh = () => {
    // The implementation to bypass cached data => { skipCache: true }
}

return <button onClick={handleRefresh}>Refresh</button>
const trpcUtils = trpc.useUtils(); // This will return cached data from the server.

const { data: guilds, error } = trpc.private.guilds.useQuery();

const handleRefresh = () => {
    // The implementation to bypass cached data => { skipCache: true }
}

return <button onClick={handleRefresh}>Refresh</button>
Is this something that's possible?
29 replies