Fully controlled table with React Query: how to do initialization

[sjbuysse]

The docs example for a fully controlled table looks like this:

  // Create the table and pass your options
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  // Manage your own state
  const [state, setState] = React.useState(table.initialState)

  // Override the state managers for the table to your own
  table.setOptions(prev => ({
    ...prev,
    state,
    onStateChange: setState,
  }))

Now let's say you want your data is dependant on the filter and pagination state.
Your query would look a bit like this

const {columnFilters, pagination} =  mapFilters(state);

const {data} = useQuery(
    ['table-data', columnFilters, pagination],
    () => getData(columnFilters, pagination)

The difficulty is that your data depends on the table state, but to initialize your table you already need a data instance.

Tanner Linsley says In this issue that we should simply use the state variable in our query: #2193 (comment)
The problem is that you need an initialState with the correct type to initialize this state, or you'll get TypeScript issues when passing state and setState to table.setOptions.
And in order to get this initialState value (or an object with the correct shape) we need a table instance, right?

Any suggestions for a way out of this dependency loop?

[bzbetty]

we set data in useReactTable to be [], then later use setOptions to update data.

still seems to have it's issues (race conditions where click events happen when there's no data), but mostly works.