passive-yellow

Problem with react query and nextjs query params

Hi, I am using react query with a custom hook for pagination but the query is not executed, it is always pending for some reason and it does not make the call, is it because of the line where I push the queries, did it happen to anyone?

import { OptionalParams, Pagination } from '@/types/commonTypes'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'

const usePagination = (otherParams: OptionalParams = {}) => {
  const searchParams = useSearchParams()
  const router = useRouter()

  const defaultParams: Pagination = {
    page: Number(searchParams?.get('page')) || 1,
    limit: Number(searchParams?.get('limit')) || 10,
    search: searchParams?.get('search') || '',
  }

  const [query, setQuery] = useState<Pagination & OptionalParams>({
    ...defaultParams,
    ...otherParams,
  })

  useEffect(() => {
    const newParams = new URLSearchParams(searchParams)
    Object.entries(query).forEach(([key, value]) => {
      if (value !== undefined && value !== '') {
        newParams.set(key, value !== null ? value.toString() : '')
      }
    })
    router.push(`?${newParams.toString()}`)
  }, [query, currentPathname, router, searchParams])

  return {
    query,
    setQuery,
  }
}

export default usePagination

import { OptionalParams, Pagination } from '@/types/commonTypes'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'

const usePagination = (otherParams: OptionalParams = {}) => {
  const searchParams = useSearchParams()
  const router = useRouter()

  const defaultParams: Pagination = {
    page: Number(searchParams?.get('page')) || 1,
    limit: Number(searchParams?.get('limit')) || 10,
    search: searchParams?.get('search') || '',
  }

  const [query, setQuery] = useState<Pagination & OptionalParams>({
    ...defaultParams,
    ...otherParams,
  })

  useEffect(() => {
    const newParams = new URLSearchParams(searchParams)
    Object.entries(query).forEach(([key, value]) => {
      if (value !== undefined && value !== '') {
        newParams.set(key, value !== null ? value.toString() : '')
      }
    })
    router.push(`?${newParams.toString()}`)
  }, [query, currentPathname, router, searchParams])

  return {
    query,
    setQuery,
  }
}

export default usePagination

is for this line, if i delete it react query works but dosent push to the url

router.push(`?${newParams.toString()}`)

router.push(`?${newParams.toString()}`)

const { query, setQuery } = usePagination()

  const { data: milestones, isLoading } = useQuery({
    queryKey: ['getMilestonesByProject', '', query],
    queryFn: () => getMilestonesProject('', query),
  })

const { query, setQuery } = usePagination()

  const { data: milestones, isLoading } = useQuery({
    queryKey: ['getMilestonesByProject', '', query],
    queryFn: () => getMilestonesProject('', query),
  })

3 Replies

flat-fuchsia•14mo ago

👋 Did you solve it?

passive-yellowOP•14mo ago

@denis.monastyrskyi no bro, i didnt find a solution yet

flat-fuchsia•14mo ago

@lucasp Can you create a small reproduction of your code on the codesandbox? I will try to help you with it, but it's hard to do just by looking on your code.

Gaming

Programming

Problem with react query and nextjs query params

Did you find this page helpful?