isLoading always false after suspense

[cesarve77]

I am implementing a search, but when the query change isLoading never change,
how can I handle this situation, to show a spinner when the user enter a search.

I need a way to difference when isFetching change because a variable change or when is a background fetching (same variables)

this is the code:

export const ProjectsList = () => {
  const router = useRouter()
  const [search, setSearch] = useState("")
  const page = Number(router.query.page) || 0
  const [{ projects, hasMore },{isLoading}] = usePaginatedQuery(getProjects, {
    orderBy: { id: "asc" },
    skip: ITEMS_PER_PAGE * page,
    take: ITEMS_PER_PAGE,
    where: search ? {name:{contains:search}} : {}
  })

  const goToPreviousPage = () => router.push({ query: { page: page - 1 } })
  const goToNextPage = () => router.push({ query: { page: page + 1 } })
  console.log('isLoading',isLoading)
  return (
    <div>
      <input value={search} onChange={e=>setSearch(e.currentTarget.value)}/>
      <ul>
        {isLoading && 'Loading...'}
        {projects.map((project) => (
          <li key={project.id}>
            <Link href={Routes.ShowProjectPage({ projectId: project.id })}>
              <a>{project.name}</a>
            </Link>
          </li>
        ))}
      </ul>

      <button disabled={page === 0} onClick={goToPreviousPage}>
        Previous
      </button>
      <button disabled={!hasMore} onClick={goToNextPage}>
        Next
      </button>
    </div>
  )
}

When a search is input isFetching change, but isLoading does not.

I implement this
(to detect loading state but seems it is a easy way to do it)

export default function usePaginatedLoadingQuery<T extends QueryFn, TResult = PromiseReturnType<T>,
  TError = unknown, TSelectedData = TResult>(
  queryFn: T,
  params: FirstParam<T>,
  options?: UseQueryOptions<TResult, TError, TSelectedData> & QueryNonLazyOptions,
)
  : [TSelectedData, RestPaginatedResult<TSelectedData, TError>] {
  const [queryResult, { isFetching, isPreviousData, ...restResult }] = usePaginatedQuery(
    queryFn,
    params,
    options,
  );

  const old = useRef(params);
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    const newIsLoading = (shallowDiffers(old.current, params)) && isFetching && isPreviousData;
    old.current = params;
    setIsLoading(newIsLoading);
  }, [isFetching, isPreviousData, params]);
  return [queryResult, {
    isFetching, isPreviousData, ...restResult, isLoading,
  }];
}

function shallowDiffers(a, b) {
  for (const i in a) if (!(i in b)) return true;
  for (const i in b) if (a[i] !== b[i]) return true;
  return false;
}


 const loading = useIsLoading(isFetching,isPreviousData, search, page)

What it does is check is the query using the same params when is refetching then it is a background fetch (no isLoading) but when params are different then is because is a user input, (new search or next page) then is loading

thanks!

[beerose]

You could pass {suspense: false} to the third argument of usePaginatedQuery and disable suspense. This will let you use isLoading.