typeDefinition of updater function in setQueryData

[TkDodo]

Hi,

First of all: thanks for this 😎 library. I'm having a quick typescript question:

setQueryData takes an updater in the form of:

((oldData: T | undefined) => T)

The question is: if oldData is possibly undefined, how would be we able to construct T?

suppose we have a simple type:

type Person = {
    firstName: string,
    lastName: string
}

and we mutate that persons firstName, which we want to optimistically update (I've taken the optimistic update example as a base):

useMutation(
    firstName => axios.patch('/api/person', { firstName }),
    {
      onMutate: firstName => {
        queryCache.cancelQueries('person')

        const previousValue = queryCache.getQueryData('person')

        queryCache.setQueryData('person', old => ({
          ...old,
          firstName
        }))

        return previousValue
      }
  )

but if oldData is possibly undefined, the resulting object can never be of type Person - it might miss the lastName.

We are currently working around this by doing:

const previousValue = queryCache.getQueryData('person')

if (previousValue) {
    queryCache.setQueryData('person', {
        ...previousValue,
        firstName
    })
}

The question is: can old really be undefined ? If so, wouldn't this be a runtime error in the example here when accessing old.items ? Or is this maybe just an issue with the type definitions and old can actually never be undefined?

Thanks for clarifying

[sekhavati]

@TkDodo I had a similar issue occurring with setQueryData. Once I qualified the input parameter to the updater function the compiler was happy. In my case I was dealing with an array of users rather than a single user, ie:

type User = {
  firstName: string;
  lastName: string;
  age: number;
};

Broken

queryCache.setQueryData(QUERY_KEYS.FETCH_USERS, (oldUsers) => [
    ...oldUsers,
    newUser,
  ]);

Fixed

queryCache.setQueryData(QUERY_KEYS.FETCH_USERS, (oldUsers: Array<User>) => [
    ...oldUsers,
    newUser,
  ]);

Hope this helps

[TkDodo]

Hi @sekhavati

Yeah, it works like this with Arrays, but note that you could also provide the call-side generic:

queryCache.setQueryData<Array<User>><(QUERY_KEYS.FETCH_USERS, oldUsers => [
    ...oldUsers,
    newUser,
  ]);

The reason this works is exactly because you have an Array. Note that in either case, oldUsers is still possibly undefined (according to the types), but since you always create a new Array (and spreading undefined is possible), you have a function of this signature, which is fine:

(oldUsers: Array<User> | undefined>) => Array<User>

However, if you are trying to do the same thing with a single user, it still won't work, as you cannot just say oldUser is of type User, because that doesn't match the type for setQueryData. So this:

type User = {
    firstName: string
    lastName: string
}

queryCache.setQueryData('key', (oldUser: User) => ({
    ...oldUser,
    lastName: 'Smith',
}))

will still result in:

Error:(43, 32) TS2345: Argument of type '(oldUser: User) => { lastName: string; firstName: string; }' is not assignable to parameter of type '{ lastName: string; firstName: string; } | ((oldData: { lastName: string; firstName: string; } | undefined) => { lastName: string; firstName: string; })'.
  Type '(oldUser: User) => { lastName: string; firstName: string; }' is not assignable to type '(oldData: { lastName: string; firstName: string; } | undefined) => { lastName: string; firstName: string; }'.
    Types of parameters 'oldUser' and 'oldData' are incompatible.
      Type '{ lastName: string; firstName: string; } | undefined' is not assignable to type 'User'.
        Type 'undefined' is not assignable to type 'User'.

which is still the exact same issue

[sekhavati]

@TkDodo I see the same error as you now after enabling strict mode regardless of whether it's a single or array based example. I'm in the middle of migrating a JS project to TS and didn't have it on before.

I also agree that queryCache.setQueryData<User[]>(...) seems preferable and allows more type safety.

[tannerlinsley]

Status on this?

[TkDodo]

Hi Tanner,

The main question remains: Can the previousValue actually be undefined at runtime? I was unable to get that from looking at the source code.

if yes, that means that the types are correct, but that the example can fail here when accessing old.items and old is undefined, and then we have a hard time constructing a T when we get T | undefined in that function. It will be possible with arrays, but with objects, it's very hard (see my previous comment)

if no, then all we would need to do is "fix" the type definitions of setQueryData, which would be easy to do (happy to provide a PR if that would be correct).

Thanks for you help :)

[pokorson]

The main question remains: Can the previousValue actually be undefined at runtime? I was unable to get that from looking at the source code.

It could be undefined as you can provide not existing queryKey, right?

[TkDodo]

The main question remains: Can the previousValue actually be undefined at runtime? I was unable to get that from looking at the source code.

It could be undefined as you can provide not existing queryKey, right?

Okay, I didn't think of that. I don't think there is an easy way to make that type-safe (as in: it will be T if the key is valid and undefined otherwise, because we don't know what a valid key is)

The question is if that is a use-case we want to cover, and if it is worth to do undefined checks for the case that you mis-type a queryKey. Personally, I'd rather have a real runtime error if something like that happens 🤷 .

Let me re-phrase the question: Given a valid queryKey, can the previousValue be undefined? Say, on the first run, when you don't have a previousValue yet .. ?

[pokorson]

Let me re-phrase the question: Given a valid queryKey, can the previousValue be undefined? Say, on the first run, when you don't have a previousValue yet .. ?

This should be possible as well. If you don't set the initial value the default one will be undefined. If you will try reading query before queryFn completes you will get undefined. This might be also true when there's a request error or { manual: true }? To me the result type is incorrect as previousValue: undefined should just return undefined

[TkDodo]

To me the result type is incorrect as previousValue: undefined should just return undefined

ah right, so instead of:

((oldData: T | undefined) => T)

we should have:

((oldData: T | undefined) => T | undefined)

?

[pokorson]

yes, it makes more sense I think

[tannerlinsley]

🎉 This issue has been resolved in version 1.5.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀