Behaviour when using suspense true on client side but specific urql queries having suspense turned off with context param

[Biboswan]

Giving a minimal viable example It seems to me in the case mentioned here some somewhat Spinner2 is visble when suspense is turned off in the query related to dataA but not when suspense is true everywhere. Client({suspense:true})
Very much puzzled and would like understand somewhat the inner process.

  <Suspense fallback={<Spinner/>}>
    <ComponentA />
  </Suspense>

 const ComponentA = () => {
    const [dataA, isLoadingDataA] = useQuery({query:queryA,variables:..., context: {suspense:false}})
    const [dataB, isLoadingDataB] = useQuery({query:queryB,variables:...})
    if (isLoadingA) { return <Spinner2/>};
   return <ComponentB dataA={dataA} dataB={dataB}/>
}

[JoviDeCroock]

That's not how our query-signature looks.... it's in the basics section of the docs

 const ComponentA = () => {
    const [resultA] = useQuery({
      query:queryA,
      context: React.useMemo(function () { return { suspense:false } }, [])
    });
    const [resultB] = useQuery({ query:queryB });
    if (resultA.fetching) return <Spinner2/>;
    return <ComponentB dataA={resultA.data} dataB={resultB.data}/>;
}

[Biboswan]

I 'm aware of the basic syntax. Sorry for being a bit lazy, my main question was focused on understanding the behavior under the mentioned variable condition of suspense... So I tried to produce a simpler example. I showed in my previous comment kinda the outermost layer of the wrapper I'm using around the useQuery from react-urql . It basically returns [data, fetching] or else throws error.

const context = { suspense: false }
export const useFindByIdentifier = (identifier) => {
  const [{ data, fetching }] = useQuery({
    variables: { identifier },
    query: findByIdentifierQuery,
    context,
  })
  return [data?.Person.findByIdentifier, fetching]
}

//useQuery
export default ({ pollInterval, ...args }) => {
  const results = useQuery(args) // react-urql
  const [{ fetching }, executeQuery] = results
  useEffect(() => {
    if (pollInterval && !fetching) {
      const id = setTimeout(() => executeQuery({ requestPolicy: 'network-only' }), pollInterval)
      return () => clearTimeout(id)
    }
  }, [pollInterval, fetching, executeQuery])
  if (results[0].error) {
    throw results[0].error
  }
  return results
}

[JoviDeCroock]

Sorry but in that case I think I'm misunderstanding the question you're asking 😅

Suspense will throw a promise up and allow it being resolved, when you turn Suspense off it doesn't mean that that query can't resolve due to another thing being suspended. It will also be fetched but not waited for so when the second pass of said component starts you can hit the result.fetching boundary for the non-suspending equivalent.

[Biboswan]

What I noticed by experimenting that whenever there are mixed queries with suspense on and off. The moment it founds a query with suspense: true the whole component is suspended and fallback ui is shown untill the queries resolves and fetching from useQuery from 'react-urql become false. Right ?

But today it seemed to me that it may not be the case

[kitten]

That's just how React works. You can't have any component being actively used and suspended at the same time. If a subtree suspends you have to treat it and think of it as if it wasn't mounted at all