Piotr Comments - Convex Community

Piotr

•Created by Alvi on 3/15/2025 in #support-community

stable query with status

I have created following hook with isLoading status based on @erquhart idea:

import {OptionalRestArgsOrSkip, useQuery} from 'convex/react'
import {FunctionReference} from 'convex/server'
import React from 'react'

export function useStableQuery<Query extends FunctionReference<'query'>>(
  query: Query,
  ...args: OptionalRestArgsOrSkip<Query>
): {data: Query['_returnType'] | undefined; isLoading: boolean} {
  const result = useQuery(query, ...args)
  const stored = React.useRef<typeof useQuery>(result)
  if (result !== undefined) {
    stored.current = result
  }
  return {data: stored.current, isLoading: result === undefined}
}

import {OptionalRestArgsOrSkip, useQuery} from 'convex/react'
import {FunctionReference} from 'convex/server'
import React from 'react'

export function useStableQuery<Query extends FunctionReference<'query'>>(
  query: Query,
  ...args: OptionalRestArgsOrSkip<Query>
): {data: Query['_returnType'] | undefined; isLoading: boolean} {
  const result = useQuery(query, ...args)
  const stored = React.useRef<typeof useQuery>(result)
  if (result !== undefined) {
    stored.current = result
  }
  return {data: stored.current, isLoading: result === undefined}
}

and you can use it like this:

const [searchName, setSearchName] = React.useState('')
const {data: organisations, isLoading} = useStableQuery(
  api.organisations.findByName,
  {
    name: searchName,
  },
)
//...

const [searchName, setSearchName] = React.useState('')
const {data: organisations, isLoading} = useStableQuery(
  api.organisations.findByName,
  {
    name: searchName,
  },
)
//...

5 replies