Peform Comments

Peform

•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