Discussion on fetching fresh data from API in custom document view component using useClient() and a reference implementation of useListeningQuery hook.

  const fetchConcepts = async (): Promise<any> => {
    try {
      // the current working version puts a delay here, which returns consistent results, but is not ideal:
      // await new Promise((resolve) => setTimeout(resolve, 1000))
      const res = await client.fetch(trunkBuilder(), {id: dId})
      // what I would like to do is check the _updatedAt value of the displayed document and the response, and if they don't match, wait a bit and try again:
      if (res._updatedAt !== document.displayed._updatedAt) {
        console.log('res._updatedAt', res._updatedAt)
        console.log('document.displayed._updatedAt', document.displayed._updatedAt)
        await new Promise((resolve) => setTimeout(resolve, 250))
        // unfortunately, this doesn't work. The fetched document is not updated, and the query returns the same results. Forever:
        return fetchConcepts()
      } else if (res.topConcepts === null && res.orphans.length < 1) {
        setNoConcept(true)
      } else {
        setNoConcept(false)
        setConcepts(res)
      }
    } catch (error) {
      // eslint-disable-next-line no-console
      console.log('Error: ', error)
      setIsError(true)
    }
    return setIsLoading(false)
  }