Unhandled Rejection (Error): Rendered more hooks than during the previous render (React Interface GrandStack with ApolloClient)

Question

I have an error that always occurs when I refresh my page (on localhost) I use the GrandStack React Interface based on a Neo4J database and I wanted to create a table with data filters. I used the code found right here (the complete code on CodeSandBox right here)

And it works perfectly fine until I use my data (using ApolloClient)

I declare the following query at the beginning:

const GET_INSTANCE = gql`
  {
    finalTab {
      classObject
      object
      classSubject
      subject
      relation
    }
  }
`

Then I define const data and return the following Table

  const { loading, error, data } = useQuery(GET_INSTANCE)
  return (
    <Paper>
      {loading && !error && <p>Loading...</p>}
      {error && !loading && <p>Error</p>}
      {data && !loading && !error && (
        <Table
          columns={columns}
          data={React.useMemo(() => data.finalTab, [])}
        />
      )}
    </Paper>
  )

It does work and compile, but as soon as I refresh the page, it displays the following error :

Unhandled Rejection (Error): Rendered more hooks than during the previous render.

And it points to this line : data={React.useMemo(() => data.finalTab, [])}

EDIT : I also tried declaring the data before the return statement as follows:

  const { loading, error, data } = useQuery(GET_INSTANCE)
  if (error) return <p>error</p>
  if (loading) return <p>Loading...</p>
  const instances = data.finalTab
  const data1 = React.useMemo(() => instances, [])

And then only returning the table :

  return <Table columns={columns} data={data1} />

but I still get the error

And I can't seem to get what I did wrong, Can somebody help ? Thanks a lot

Answer 1

  const { loading, error, data } = useQuery(GET_INSTANCE)
  const finalTab = React.useMemo(() => data.finalTab, [])
  return (
    <Paper>
      {loading && !error && <p>Loading...</p>}
      {error && !loading && <p>Error</p>}
      {data && !loading && !error && (
        <Table
          columns={columns}
          data={finalTab}
        />
      )}
    </Paper>
  )

useMemo is a hook that must be initialized before returning anything.