Dependent Queries: type of 'enabled' parameters

[maxwellwalin]

Hey everyone, I find myself using dependent queries quite a bit, and I'm running into an issue of forcing the types of the enabled parameters to be not null (not null assertion '!' or using 'as') in the query fn.

Here is an example:

const communitiesQuery = useQuery(
    ['communities', getCommunitiesParams],
    () => getCommunities(getCommunitiesParams),
    // ! Error: Type of 'TGetCommunityParams | undefined' is not assignable to parameter of type 'TGetCommunityParams'
    {
      enabled: !!getCommunitiesParams,
    }
  );

What is the best approach to this? If the variable is required in the enabled option, shouldn't the type of the variable in the query fn inherit the not null type?

I appreciate any input on approaching this problem. I hate forcing a not null or using 'as' when I know TS is smart enough to handle it.

[TkDodo]

Have a look here: https://tkdodo.eu/blog/react-query-and-type-script#type-safety-with-the-enabled-option

[maxwellwalin]

Interesting! From what I understand, the query fn is not called until 'enabled' evaluates to true, so the not null type inference would be safe in this case. Should I bother trying to implement this in a PR? Or do you know something that I don't?

[maxwellwalin]

My mistake. You can call 'refetch'. As always, you are the pro Tk! Thank you for your help.

[asktree]

My pattern is a little stylistically different from the provided article so I thought I'd provide it here. I simply define the enabled check once and then preface everything else with it. It's going to be more concise in many cases.

export const useAddressQuery_VoteRecord = (
  programId?: PublicKey,
  proposalAddress?: PublicKey,
  tokenOwnerRecordAddress?: PublicKey
) => {
  const enabled =
    programId !== undefined &&
    proposalAddress !== undefined &&
    tokenOwnerRecordAddress !== undefined

  return useQuery({
    queryKey: enabled
      ? [
          'VoteRecordAddress',
          [programId, proposalAddress, tokenOwnerRecordAddress],
        ]
      : undefined,
    queryFn: () => {
      if (!enabled) throw new Error()

      return getVoteRecordAddress(
        programId,
        proposalAddress,
        tokenOwnerRecordAddress
      )
    },
    enabled,
    // Staletime is zero by default, so queries get refetched often. PDAs will never go stale.
    staleTime: Number.MAX_SAFE_INTEGER,
  })
}

[maxwellwalin]

I do like this approach too since I do not have to change the parameters type of the API call fn to take in undefined parameters and I can keep all of the logic within the custom query hook.

[TkDodo]

the queryKey can't be undefined, there is absolutely no need to do that check for the key

[maxwellwalin]

Interesting. When using the { queryKey: ... } pattern, it says that it can be undefined, but not when passing it as the first parameter for useQuery().

[TkDodo]

the typings are not ideal because of all the overloads. will get better with v5. but trust me, nothing works without a queryKey.

[asktree]

Interesting, OK. I figured that as long as the query was not run, the query key wouldn't matter. The check is pointless here but in places I use query key factories I do it instead of making the arguments optional. But I guess I will just make the factory arguments optional.

[seiyab]

Can't we omit the duplication between if statement and enabled option?
Here is an idea for type-friendly dependent query API.
I think this is a feasible feature.

import { PendingQuery, useQuery } from 'react-query'

useQuery({
  queryKey: [
    'VoteRecordAddress',
    [programId, proposalAddress, tokenOwnerRecordAddress],
 ],
  queryFn: () => {
    if (
      programId === undefined ||
      proposalAddress === undefined ||
      tokenOwnerRecordAddress === undefined ||
    ) return new PendingQuery();

    return getVoteRecordAddress(
        programId,
        proposalAddress,
        tokenOwnerRecordAddress
      )
  },
  // ❤️  `enabled` is no longer necessary
})

// or

import { PendingQueryError, useQuery } from 'react-query'

useQuery({
  queryKey: [
    'VoteRecordAddress',
    [programId, proposalAddress, tokenOwnerRecordAddress],
 ],
  queryFn: () => {
    if (
      programId === undefined ||
      proposalAddress === undefined ||
      tokenOwnerRecordAddress === undefined ||
    ) throw new PendingQueryError();

    return getVoteRecordAddress(
        programId,
        proposalAddress,
        tokenOwnerRecordAddress
      )
  },
})