select function in useQuery only gets called on initial

[Jake-Prentice]

I wanted to use the select in the useQuery so that I can filter my data a bit, I'm looping over an array and in the nested array is what I want the data to be, however when the index of the selected item changes, the select doesn't rerun, so I'm left with the previous data. It never updates.

The code:

const {data, ...} = useQuery("quizzes", fetchQuizzes, { select: quizzes => quizzes[selectedQuiz.index].verbs });

what I want is that the select gets rerun everytime the selectedQuiz.index changes. Am I doing something wrong?

[TkDodo]

select is currently meant to only run when data changes. For your use-case, you will currently have to useMemo (best tucked away in a cutsom hook):

const useQuizzesQuery = (index) => {
    const queryInfo = useQuery("quizzes", fetchQuizzes);

    return {
       ...queryInfo,
       data: uiseMemo(() => queryInfo.data.quizzes[index].verbs, [queryInfo.data, index]),
    }
}

However, we're having a discussion over here: #1639

Feel free to chime in with your input :)

[Jake-Prentice]

thanks for the quick reply, never used useMemo will have to look it up.

[Jake-Prentice]

@TkDodo I'm getting this error when doing that.

[TkDodo]

Ah yes, because data is potentially undefined, so you need to guard against that. This is different from select, because when working with select, the function will only be called when data is defined. The error could also indicate that you haven't imported useMemo from 'react' or so. Sharing your code via a runnable codesandbox example would make it easier for me to spot issues :)

[Jake-Prentice]

I'm so sorry, I was just being stupid and trying to import useMemo from react-query, I knew useMemo wasn't from react-query, I'm not that inexperienced haha. Thanks it works!