fawwaz•17mo ago

building realtime table similar to notion tables

Hey al 👋 , so inspired by Notion and LiveBlocks I wanted to create a realtime table. My idea was that the state, as well as the mutation will be in store similar to how redux works. For hydration and persistence I wanted to build an store enhancer to handle this similar to the approach of the (LiveBlocks-Redux integration)[https://liveblocks.io/docs/api-reference/liveblocks-redux] which will fire an update mutation on every state change. However, because reactive queries in Convex is only accessable through query hooks and hooks can't be used in a store enhancer since it's not a component nor a hook. My question is, is there is away to work around this issue, to build a realtime table. Currently the custom hook powering the notion table looks like this

function useNotionTable(initialState?: NotionTableState) {
  const tableState = { ...defaultState, ...initialState };
  const includeTitle = tableState.columns.find((column) => column.type === "title");
  if (!includeTitle) {
    tableState.columns.push({
      id: "title",
      type: "title",
      header: "Title",
      accessorKey: "title",
      columnConfigs: {
        options: [],
      },
    });
  }
  const [state, dispatch] = useReducer(tableReducer, tableState);

  return {
    state,
    dispatch: (action: NotionTableAction) => {
      dispatch(action);
    },
  };
}

function useNotionTable(initialState?: NotionTableState) {
  const tableState = { ...defaultState, ...initialState };
  const includeTitle = tableState.columns.find((column) => column.type === "title");
  if (!includeTitle) {
    tableState.columns.push({
      id: "title",
      type: "title",
      header: "Title",
      accessorKey: "title",
      columnConfigs: {
        options: [],
      },
    });
  }
  const [state, dispatch] = useReducer(tableReducer, tableState);

  return {
    state,
    dispatch: (action: NotionTableAction) => {
      dispatch(action);
    },
  };
}

3 Replies

Michal Srb•17mo ago

Hey @fawwaz, check the Convex client APIs: https://docs.convex.dev/api/classes/react.ConvexReactClient#watchquery https://docs.convex.dev/api/classes/react.ConvexReactClient#query and check out the implementation of useQuery. These might help implement binding to data in Convex from places that cannot use the useQuery hook. You might also be able to structure your app in a way that still uses useQuery hook and passes the data to a store.

Class: ConvexReactClient | Convex Developer Hub

react.ConvexReactClient

fawwazOP•17mo ago

already gone through the docs 😃 . The reason I raised the question is to confirm if such use-case is indeed not possible current with Convex and if so then maybe we can switch this to a feature request I think the core of the problem is that if you are going to build realtime table similar to the one in notion, then you will need some type of store, like reudx. How can you integrate with the store to hydrate, patch-Updates and persist the table data

Michal Srb•17mo ago

You can build a realtime table with useQuery, without Redux. You won't get offline support / persistence, but you could build some form of it on top of useQuery. Local persistence and offline support is something we're still investigating. Alternatively you can explore the APIs I linked (watchQuery, query), as those do not require the use of hooks, to work around the original issue. But we don't have a ready solution for Redux specifically.

building realtime table similar to notion tables

Did you find this page helpful?