How to pass a custom parameter in useInfinityQuery using the React Query library?

Question

I need to provide a parameter for the function call within useInfinityQuery, where this parameter will hold a value used for filtering in the request URL parameters.

My parameter is named "search_query."

export function useGetCustomers() {
  async function getCustomerApi(pageParam: number, search_query: string) {
    const response = await api.get<ApiResponse>(
      `/users?page=${pageParam}&search=${search_query}`,
    )
    return response.data
  }

  const { data, fetchNextPage, hasNextPage, isFetching, isInitialLoading } =
    useInfiniteQuery<ApiResponse>(
      ['customers'],
      async ({ pageParam = 1 }, search_query = '') =>
        getCustomerApi(pageParam, search_query),
      {
        keepPreviousData: false,
        getNextPageParam: (lastPage) => {
          return lastPage.next_page_url
            ? lastPage.next_page_url.split('=')[1]
            : null
        },
      },
    )

  return {
    customers: data?.pages.flatMap((page) => page.data),
    getNextPageCustomers: fetchNextPage,
    hasNextPageCustomers: hasNextPage,
    isFetchingCustomers: isFetching,
    isInitialFetchingCustomers: isInitialLoading,
  }
}

In the component, I'm trying to call the request function in this way:

  useEffect(() => {
    getNextPageCustomers({search_query:"Josh"})
  }, [])

However, it's not working; this variable is arriving with the value undefined. How can I resolve this?

score 0 · Answer 1 · answered Sep 01 '23 at 16:23

You should pass this property as an argument directly to the hook.

export function useGetCustomers(search_query: string)
  async function getCustomerApi(pageParam: number, search_query: string) {
    const response = await api.get<ApiResponse>(
      `/users?page=${pageParam}&search=${search_query}`,
    )
    return response.data
  }

  const { data, fetchNextPage, hasNextPage, isFetching, isInitialLoading } =
    useInfiniteQuery<ApiResponse>(
      // add search_query to the cache key so the cache works correctly
      ['customers', search_query],
      // search_query is not passed as an argument
      // but read directly from the enclosing scope
      async ({ pageParam = 1 }) =>
        getCustomerApi(pageParam, search_query),
      {
        keepPreviousData: false,
        getNextPageParam: (lastPage) => {
          return lastPage.next_page_url
            ? lastPage.next_page_url.split('=')[1]
            : null
        },
      },
    )

  return {
    customers: data?.pages.flatMap((page) => page.data),
    getNextPageCustomers: fetchNextPage,
    hasNextPageCustomers: hasNextPage,
    isFetchingCustomers: isFetching,
    isInitialFetchingCustomers: isInitialLoading,
  }
}

  const { getNextPageCustomers } = useGetCustomers("Josh")

  useEffect(() => {
    getNextPageCustomers()
  }, [])

How to pass a custom parameter in useInfinityQuery using the React Query library?

1 Answers1