Rune Darkfire•4mo ago

How do I wait for a useQuery declaration to return before proceeding?

I feel like I'm missing something simple. Here's the code for a component that gets called on many pages in my application :

  const { isLoaded, isSignedIn, orgId } = useAuth();

  const contractTypes = useQuery(api.contract_types.list, { orgId: orgId !== undefined ? orgId : undefined }) || []
  const addContractType = useMutation(api.contract_types.add)
  const vendorCategories = useQuery(api.vendor_categories.list, { orgId: orgId !== undefined ? orgId : undefined }) || []
  const addVendorCategory = useMutation(api.vendor_categories.add)

  const settingsLoaderRef = useRef(false);

  useEffect(() => {
    if (!settingsLoaderRef.current && isLoaded && isSignedIn && orgId
        && contractTypes && vendorCategories) {
      settingsLoaderRef.current = true // EXECUTION GETS HERE BUT contractTypes AND vendorCategories are returning the empty array, even though I know they should have data in them
      if (!contractTypes.length) setContractTypeDefaults()
      if (!vendorCategories.length) setVendorCategoryDefaults()
    }
  }, [isLoaded, isSignedIn, contractTypes, vendorCategories, orgId]);

  const { isLoaded, isSignedIn, orgId } = useAuth();

  const contractTypes = useQuery(api.contract_types.list, { orgId: orgId !== undefined ? orgId : undefined }) || []
  const addContractType = useMutation(api.contract_types.add)
  const vendorCategories = useQuery(api.vendor_categories.list, { orgId: orgId !== undefined ? orgId : undefined }) || []
  const addVendorCategory = useMutation(api.vendor_categories.add)

  const settingsLoaderRef = useRef(false);

  useEffect(() => {
    if (!settingsLoaderRef.current && isLoaded && isSignedIn && orgId
        && contractTypes && vendorCategories) {
      settingsLoaderRef.current = true // EXECUTION GETS HERE BUT contractTypes AND vendorCategories are returning the empty array, even though I know they should have data in them
      if (!contractTypes.length) setContractTypeDefaults()
      if (!vendorCategories.length) setVendorCategoryDefaults()
    }
  }, [isLoaded, isSignedIn, contractTypes, vendorCategories, orgId]);

How can I make this useEffect do what I want so that the vendorCategories and contractTypes tables in the DB don't keep adding the defaults over & over? To be clear -- the very first time this code is called after a login, it behaves as if the arrays are empty, but when I navigate away from any pages with this component and then come back, it recognizes what's in the DB at that point. How do I make sure it loads what's in the DB from the useQuery the FIRST time this is called after login?

4 Replies

Convex Bot•4mo ago

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. - Ask in the <#1228095053885476985> channel to get a response from <@1072591948499664996>. - Avoid tagging staff unless specifically instructed. Thank you!

lee•4mo ago

the empty array is truthy. so if you do

const contractTypes = useQuery(api.contract_types.list, { orgId: orgId !== undefined ? orgId : undefined }) || []

const contractTypes = useQuery(api.contract_types.list, { orgId: orgId !== undefined ? orgId : undefined }) || []

then the later check for if (contractTypes) doesn't do anything i would remove the || []

sshader•4mo ago

(in general I'm a fan of ?? [] instead of || [] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing, since it's almost always the behavior I want -- doesn't actually avoid the problem here, but mentioning anyways)

Rune DarkfireOP•4mo ago

thanks both for the help. @lee that was indeed the issue, thank you!

How do I wait for a useQuery declaration to return before proceeding?

Did you find this page helpful?