Rendered more hooks than during the previous render after apollo useQuery

Question

I'm tying to find a way to correct the Hook rendering error. I have a total of 3 useQuery hooks being rendered:

   const {
        data: OSData,
        error: OSError,
        loading: OSLoading,
      } = useQuery(OSData, {

        variables: {
          NUMBER: UniqueList,
        },
      })

      const {
        data: RamData,
        error: RamERROR,
        loading: RamLOADING,
      } = useQuery(GET_Ram)

    
      const {
        data: Hardware,
        error: HardwareERROR,
        loading: HardwareLOADING,
      } = useQuery(GET_Hardware)

The variable 'NUMBER' is based on a list 'UniqueList' that is made from the GET_Ram and GET_Hardware queries so the OSData query needs to be called later or there's an undefined variable. However, calling the OSData Query later in the code gives me a render error.

Any idea on how I could accomplish this?

Thank you!

Answer 1

an answer I found is using lazy query.

       const SomeData [{
            called, loading, data
          }] = useLazyQuery(OSData)
          })

  if (called && loading) return <p>Loading ...</p>

  if (HardwareLOADING || RamLOADING) return <p> loading</p>
  if (HardwareERROR || RamERROR) return <p>error</p>


//perform all the needed calculations for the variable here

and in the return statement you can call the query and provide the variable. Here I use a button.

<div>
  <button onClick={() => SomeData({ variables: { NUMBER: uniqueList } })}>
    Load{' '}
  </button>
</div>

Hope this helps someone