Typing issues with dependent queries

[smashercosmo]

This is an example of dependent query from docs

const { data } = useQuery(
  ['projects', user?.id],
  getProjectsByUser,
  {
    enabled: user?.id,
  }
)

The problem is that in this case getProjectsByUser should be typed like this

function getProjectsByUser(userId?: string) { ... }

which doesn't feel right. Any ideas what's the best way to deal with dependent queries in terms of types?

[wolverineks]

what about something like this?

const { data } = useQuery(
  ['projects', user?.id],
  ([, id]) => getProjectsByUser(id),
  { enabled: user?.id }
)

function getProjectsByUser(userId?: string) { ... }

[smashercosmo]

mmm.... but getProjectsByUser is still typed as having optional userId param, which is not correct

[wolverineks]

const useProjects = (user?: { id: string }) =>
  useQuery(
    ['projects', user?.id],
    ([, id]) => getProjectsByUser(id),
    { enabled: user }
  )

function getProjectsByUser(userId: string) { ... }

[ayush987goyal]

@wolverineks This will again cause the id to take the type of string | undefined instead of just string.

[ayush987goyal]

@boschni Any thoughts on this?

[boschni]

The query key parameters are spread onto the query function and currently this is type checked to make sure they are in sync. We could remove this check, but it does remove some safety. This error would then not be caught for example:

useQuery(
  ['projects', 1],
  (userId: number) => getProjectsByUser(id)
)

Another possibility would be to split the variables from the key. This would require a change to the api, but it would allow to type the variables as optional:

useQuery({
  id: 'projects',
  variables: user ? [user.id] : undefined,
  queryFn: getProjectsByUser,
  enabled: user
})

or

useQuery({
  id: 'projects',
  variables: user ? { userId: user.id } : undefined,
  queryFn: getProjectsByUser,
  enabled: user
})

But with the current code, you would probably need to wrap the query function:

useQuery(
  ['projects', user?.id],
  (_key, userId) => {
    if (userId) {
      return getProjectsByUser(userId)
    }
  },
  { enabled: user }
)

[ayush987goyal]

Yes exactly, with the last snippet, the check is only needed to make TS happy. That branch will never get called because of enabled flag.

[smashercosmo]

Yeah, I also came up with the same solution, though it's definitely far from ideal

[ayush987goyal]

When the queries could be falsy before for dependency, we could write the above snippet as:

useQuery(
  user && ['projects', user.id],
  (_key, userId) => {
      return getProjectsByUser(userId);
  }
)

which would then address the above two issues (dependency and nullish check) with one syntax.