useInfiniteQuery passes all array elements of query key as arguments into the handler

[bluskript]

useInfiniteQuery appears to pass all array elements from the query key as separate arguments in the handler, while I expected that only the first handler argument would be the key. Here's what I mean:

useInfiniteQuery(
    ["messages", host, guildID, messageID],
    async (key, messageID) => {
        console.log(messageID === host);
    },
    {
      getFetchMore: (msgs) => {
        return msgs?.[0]?.location?.messageId;
      },
    }
)

this prints true, meaning host is being passed as the second parameter to the function, even though it should actually be the messageID, while key should contain an array.

[tannerlinsley]

This is by design.

[bluskript]

What would be the best way to access messageID then? It feels rather inelegant to have to specify a new argument in the handler every time a new array element is added to the key...

[TkDodo]

I usually do this the explicit way, since we have everything we need in a closure, because it works better with typescript, meaning:

const fetchData = async (messageID) => ...

useInfiniteQuery(
    ["messages", host, guildID, messageID],
    () => fetchData(messageID)
    }
)

This approach has also been discussed here: #1087 (comment)

[tannerlinsley]

Indeed, this is better