React query useQueries Cannot read properties of undefined (reading 'map')

Question

I have the following hook to fetch multiple queries:

function useClientSurveys(surveysIds) {
  const { isAdmin } = useAdminStatus();
  return useQueries(
    surveysIds &&
      surveysIds.map(surveyId => ({
        queryKey: ['clientSurvey', surveyId],
        queryFn: () => getSurvey(surveyId),
        enabled: !isAdmin && !!surveysIds,
      }))
  );
}

I'm using it like this:

  const dummyIds = [
    '1234534324326',
    '3487236482376'
  ]

  const {
    data: clientSurveys,
    isError: isClientSurveysError,
    isLoading: isClientSurveysLoading,
  } = useClientSurveys(dummyIds);

I keep getting undefined even though I know the array is defined because it's hard-coded in this case.

What may be causing this error?

Tomas Vancoillie · Accepted Answer · 2022-11-09 08:44:22Z

2

As described in the documentation, you need to pass your queries as an object.

useQueries({
  queries: surveysIds.map(surveyId => ({
    queryKey: ['clientSurvey', surveyId],
    queryFn: () => getSurvey(surveyId),
    enabled: !isAdmin && !!surveysIds,
  }))
})

UseQueries documentation

answered Nov 9, 2022 at 8:44

Tomas Vancoillie

3,8682 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TkDodo Over a year ago

you also need to make sure that surveysIds is an array. OP had a check with surveysIds && surveysIds.map(...) and that won't work. It needs to be something like: surveyIds?.map(...) ?? []

eater · Accepted Answer · 2023-06-23 15:38:05Z

0

i solve my problem with

  return useQueries(
      surveysIds.map(surveyId => ({
        queryKey: ['clientSurvey', surveyId],
        queryFn: () => getSurvey(surveyId),
        enabled: !isAdmin && !!surveysIds,
      })) ?? []
  );

answered Jun 23, 2023 at 15:38

eater

11 bronze badge

Collectives™ on Stack Overflow

React query useQueries Cannot read properties of undefined (reading 'map')

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related