Peform
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
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
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