T
TanStack•3y ago
other-emerald

Is calling functions within `queryFn` a bad design?

We use a combination of zod, react-hook-form, and react-query to populate, validate, control, and save our forms. Currently we're doing something like this for populating the schema: 
const { reset } = methods

const { data, status } = useQuery({
  queryKey: ['foobar', id],
  queryFn: async ({ signal }) => {
    const details = await foobar.get({ id }, signal)

    reset(details)

    return {
      details
    }
  }
})
const { reset } = methods

const { data, status } = useQuery({
  queryKey: ['foobar', id],
  queryFn: async ({ signal }) => {
    const details = await foobar.get({ id }, signal)

    reset(details)

    return {
      details
    }
  }
})
Is calling reset from within queryFn a bad idea? Is there any point for me to return details if I never use the data object or care about its cache?
10 Replies
other-emerald
other-emeraldOP•3y ago
The reason I ask is I caught some of Dominik's stream about onSuccess of a mutation and unmounted components still firing, so I wanted to double check if there was a concern with useQuery (and if I overlooked documentation somewhere)
rival-black
rival-black•3y ago
Have you read dominiks post on this? https://tkdodo.eu/blog/react-query-and-forms There are some great conversations about exactly this in the comments. Specifically the RHF values api
other-emerald
other-emeraldOP•3y ago
I read the posts but overlooked the comments, let me check those out Okay yeah those comments definitely lead me in a good direction and I think you're right, the values api is exactly what I should be using While we were setting up our project we just stuck some things outside of the component to keep them out of the renders, and I think trying to get real data hooked up threw me for a loop
rival-black
rival-black•3y ago
I'd love to hear what you end up doing. I'm using the same stack but never settled on anything that felt right. Current still doing reset() in a useEffect 🥲
other-emerald
other-emeraldOP•3y ago
I like what I see with the values API but it introduces a TS issue for undefined/optional props to solve for. Currently I'm deciding how to best update my zod schema once data is loaded. We attached a setDisabled method so that the entirey of our scehma controls our form (required, disabled, validation, etc). We have a mix of interfaces which only have some fields enabled, some fields required by DB perms, it's a mess... For example, I'm working with something like: 
const schema = z.object({
  quantity: z.number().optional().setDisabled(true)
})

type Model = z.infer<typeof schema>

export const MyComponent = ({ id }: MyComponentProps): JSX.Element => {
  const { data, status } = useQuery({
    queryKey: [MyComponent.name, id],
    queryFn: async ({ signal }) => myResource.get({ id }, signal)
  })

  // This is our own small useForm wrapper (basically just adds a zod resolver instead of writing it every time)
  const methods = useForm<Model>(schema, { values: data })

  // ...

  return (
    <Form<Model> methods={methods} schema={schema}>
      <NumberInput label='Quantity' name='quantity' />
    </Form>
  )
})
const schema = z.object({
  quantity: z.number().optional().setDisabled(true)
})

type Model = z.infer<typeof schema>

export const MyComponent = ({ id }: MyComponentProps): JSX.Element => {
  const { data, status } = useQuery({
    queryKey: [MyComponent.name, id],
    queryFn: async ({ signal }) => myResource.get({ id }, signal)
  })

  // This is our own small useForm wrapper (basically just adds a zod resolver instead of writing it every time)
  const methods = useForm<Model>(schema, { values: data })

  // ...

  return (
    <Form<Model> methods={methods} schema={schema}>
      <NumberInput label='Quantity' name='quantity' />
    </Form>
  )
})
So what I can do once data loads is schema.shape.quantity.setDisabled(false) which works but its the same dilemma you have. Inside a useEffect? Sneak it inside the queryFn? Just put schema.shape.quantity.seDisabled(!data) without a hook? Etc? For my TS problem I can do { values: data as Model } but casting feels lame. I'm not sure if casting should be a last resort or not.
rival-black
rival-black•3y ago
Could it make sense to return schema.parse(myResource.get({id},signal)) from your queryFn? I've been passing all of my api responses through schema parse and it is typing everything nicely. I would say there are probably an ocean of options before casting, I'm just very far from a typescript wizard so I can't help a whole lot there
other-emerald
other-emeraldOP•3y ago
Yeah typescript is a monster. One error is 3 words and then another is 400 words lol
rival-black
rival-black•3y ago
I've got a mix at the moment for your other problem. I'm using useEffect(() => reset(query.data), [query.data]) basically. But then at the field level I've got disabled={query.data.field != undefined} for edit-only-when-empty fields. Which is a bit manual but my form is beyond basic anyway I don't really like doing the reset that way so I will look at values again later
other-emerald
other-emeraldOP•3y ago
That schema.parse might be what I need too, thanks Although I'll have to read more to make sure my data is correct and any errors it raises are caught What's funny is I was just about to say I like the values API and then I ran into something else lol. Some of our form fields are prepopulated from an API and some are user entered, both of which have required fields. When I use the values API I end up with: 
ZodError: [
  {
    "code": "invalid_type",
    "expected": "number",
    "received": "undefined",
    "path": [
      "unitCost"
    ],
    "message": "Required"
  }
]
ZodError: [
  {
    "code": "invalid_type",
    "expected": "number",
    "received": "undefined",
    "path": [
      "unitCost"
    ],
    "message": "Required"
  }
]
"Unit Cost" is a user entered field to specify the cost of their item. The values API errors like that but calling reset works fine. I'll have to read more docs and probably move this question to their Discord.
rival-black
rival-black•3y ago
Maybe try .default() in your schema? Not sure how that behaves

Did you find this page helpful?