Alvi•4w ago

stable query with status

i want to get if a stable query isPending but useStableQuery only returns the query data

3 Replies

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•4w ago

It should be fine to also use useQuery directly, just for the undefined check the stable query hook is quite simple really, it's just keeping the query result in a ref:

export const useStableQuery = ((name, ...args) => {
  const result = useQuery(name, ...args);
  const stored = useRef(result); 
  if (result !== undefined) {
    stored.current = result;
  }
  return stored.current;
}) as typeof useQuery;

export const useStableQuery = ((name, ...args) => {
  const result = useQuery(name, ...args);
  const stored = useRef(result); 
  if (result !== undefined) {
    stored.current = result;
  }
  return stored.current;
}) as typeof useQuery;

Piotr•4w ago

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,
  },
)
//...

stable query with status

Did you find this page helpful?