Can't use hooks conditionally - any workarounds?

[catherineluse]

Since you can't conditionally fetch resources with the useQuery hook, how would you create a component that sometimes needs to fetch something and sometimes doesn't?

The problem I keep running into is with create/edit forms. I want exactly the same fields in both create and edit mode, but different data fetched from the back end.

Specifically, the existing data should only be fetched in edit mode, but not create mode:

const { result, loading } = useQuery(GET_THING, {
      id: thingId,
    });

And then on submit, I need to do separate mutations for create mode and edit mode, but otherwise everything is the same. But I can't conditionally use a useMutation hook either.

So far, I have always created separate components for create forms and edit forms due to the inability to conditionally use these hooks. But my (small) code base is already starting to have too much duplicated code, and it's harder to maintain because I have to make each form change in two places. So what's the best practice for a situation like this?