Peform Comments

Peform

Posts Comments

TtRPC

•Created by Peform on 5/3/2025 in #❓-help

trpc caching procedure calls for queries in the same batch

if not, what exactly do you mean by putting a cache inside of createContext?

9 replies

TtRPC

•Created by Peform on 5/3/2025 in #❓-help

trpc caching procedure calls for queries in the same batch

apologies but i dont quite understand this, do you know of any example available which demonstrates how to do this?

9 replies

TtRPC

•Created by Peform on 5/3/2025 in #❓-help

trpc caching procedure calls for queries in the same batch

Hi thank you for the response. I am already using redis, which does help once the data is cached. and the redis lock could help if there is no data cached, But, it still seems a little redundant to fetch data from redis multiple times for requests in the same batch, so I am curious about the createContext method. When you say put the check inside of my create context, are you talking about the trpc context which has the db connection, users session etc?

export const createTRPCContext = async (opts: { headers: Headers }) => {
    const session = await auth();
    const correlationId = uuid4();

    return {
        db,
        session,
        stripe,
        correlationId,
        ...opts,
    };
};

export const createTRPCContext = async (opts: { headers: Headers }) => {
    const session = await auth();
    const correlationId = uuid4();

    return {
        db,
        session,
        stripe,
        correlationId,
        ...opts,
    };
};

only some of my endpoints do this "expensive check", but all endpoints require the context I which I have above ^. Would the solution to this be creating multiple contexts for each type procedure? (maybe its possible to chain contexts?) if i were to make new contexts for each procedure, im unsure how id be able to get the required data from the request in order to pass into my permission checking function

9 replies

TtRPC

•Created by Peform on 4/28/2025 in #❓-help

mutation taking a long time to appear after prefetching query

im just so confused, because the query knows it errored, but <hydrateclient> isn't passing the error object down to the client A demonstration of the issue: https://gyazo.com/610a1e2d835445e70fd2400812cad7c9

2 replies

TtRPC

•Created by Peform on 3/1/2025 in #❓-help

server side prefetch + optional client side refetch

While this works, it feels like there should be a nicer way?. Is there a recommended approach for handling this server-prefetch + client-refresh scenario with tRPC in Next.js?

2 replies

TtRPC

•Created by Peform on 8/7/2024 in #❓-help

useQuery `onSuccess` callback depreciated

Thank you will give this a watch

5 replies

TtRPC

•Created by Peform on 6/6/2024 in #❓-help

TRPC response data changing to undefined when typing in a form field.

And as an extra question, is this method of data querying a best practise? I feel like for data querying like this a useMutation is better suited, even though mutations are for changing data not querying... the syntax for mutations is much better suited for this scenario I believe.

4 replies

TtRPC

•Created by Peform on 6/6/2024 in #❓-help

TRPC response data changing to undefined when typing in a form field.

export function UserLookup() {
  const searchParams = useSearchParams();
  const [filters, _setFilters] = useState();
  const [filteredGenerations, _setFilteredGenerations] = useState<
    RouterOutputs["userLookup"]["getGenerations"]
  >([]);

  const form = useForm<z.infer<typeof lookupUserSchema>>({
    resolver: zodResolver(lookupUserSchema),
    defaultValues: {
      userId: searchParams.get("userId") ?? "",
    },
  });

  const { data: userData, refetch: refetchUserData } =
    api.userLookup.find.useQuery(
      {
        userId: form.getValues("userId"),
      },
      {
        enabled: false,
      },
    );

  const handleLookupUser = async () => {
    const response = await refetchUserData();
    if (response.error) {
      toast({
        title: "Error",
        description: response?.error?.message ?? "An unknown error occurred",
      });
    }
  };

  console.log(1, userData);

  return (
    <>
      <div className="flex flex-col gap-4">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleLookupUser)}>
            <FormField
              control={form.control}
              name="userId"
              render={({ field }) => (
                <FormItem className="grow">
                  <FormLabel>Prompt</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter your prompt"
                      maxLength={2048}
                      className="resize-none"
                      type="text"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className="mt-3" type="submit">
              Lookup user
            </Button>
          </form>
        </Form>
        {userData && (...)}
  </>

export function UserLookup() {
  const searchParams = useSearchParams();
  const [filters, _setFilters] = useState();
  const [filteredGenerations, _setFilteredGenerations] = useState<
    RouterOutputs["userLookup"]["getGenerations"]
  >([]);

  const form = useForm<z.infer<typeof lookupUserSchema>>({
    resolver: zodResolver(lookupUserSchema),
    defaultValues: {
      userId: searchParams.get("userId") ?? "",
    },
  });

  const { data: userData, refetch: refetchUserData } =
    api.userLookup.find.useQuery(
      {
        userId: form.getValues("userId"),
      },
      {
        enabled: false,
      },
    );

  const handleLookupUser = async () => {
    const response = await refetchUserData();
    if (response.error) {
      toast({
        title: "Error",
        description: response?.error?.message ?? "An unknown error occurred",
      });
    }
  };

  console.log(1, userData);

  return (
    <>
      <div className="flex flex-col gap-4">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleLookupUser)}>
            <FormField
              control={form.control}
              name="userId"
              render={({ field }) => (
                <FormItem className="grow">
                  <FormLabel>Prompt</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter your prompt"
                      maxLength={2048}
                      className="resize-none"
                      type="text"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className="mt-3" type="submit">
              Lookup user
            </Button>
          </form>
        </Form>
        {userData && (...)}
  </>

4 replies

TtRPC

•Created by Peform on 6/5/2024 in #❓-help

conditionally fetching data with a useQuery

export function UserLookup() {
  const [userLookupEnabled, setUserLookupEnabled] = useState(false);

  const form = useForm<z.infer<typeof lookupUserSchema>>({
    resolver: zodResolver(lookupUserSchema),
    defaultValues: {
      userId: "",
    },
  });

  const { data: userData } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: userLookupEnabled && !!form.getValues("userId"),
    },
  );
  
  // enable the useQuery and fetch some data....
  const handleLookupUser = () => {
    setUserLookupEnabled(true);
  };

  return (
    <>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleLookupUser)}>
            <FormField
              control={form.control}
              name="userId"
              render={({ field }) => (
                <FormItem className="grow">
                  <FormLabel>Prompt</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter your prompt"
                      maxLength={2048}
                      className="resize-none"
                      type="text"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className="mt-3" type="submit">
              Lookup user
            </Button>
          </form>
        </Form>
    </>

export function UserLookup() {
  const [userLookupEnabled, setUserLookupEnabled] = useState(false);

  const form = useForm<z.infer<typeof lookupUserSchema>>({
    resolver: zodResolver(lookupUserSchema),
    defaultValues: {
      userId: "",
    },
  });

  const { data: userData } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: userLookupEnabled && !!form.getValues("userId"),
    },
  );
  
  // enable the useQuery and fetch some data....
  const handleLookupUser = () => {
    setUserLookupEnabled(true);
  };

  return (
    <>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleLookupUser)}>
            <FormField
              control={form.control}
              name="userId"
              render={({ field }) => (
                <FormItem className="grow">
                  <FormLabel>Prompt</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Enter your prompt"
                      maxLength={2048}
                      className="resize-none"
                      type="text"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className="mt-3" type="submit">
              Lookup user
            </Button>
          </form>
        </Form>
    </>

3 replies

TtRPC

•Created by Peform on 5/10/2024 in #❓-help

uploading image via trpc endpoint

Yes please, I am using base64 right now but for larger images it makes it impossible to send! Would appreciate a snippet alot. Thanks

5 replies