[GraphQL] Can I sync Recoil state with GraphQL?

What I am working on is a collaborative spreadsheet, where table cells between different views (view is the projection of a table, table cannot exist without views, a view may contain different cells as filtering may happen) will be shared, and changes between users on the same view will be shared. So I am looking for a state management tool, that serves as a intermediate layer between my GraphQL API and my UI components, that it can push the notification to the backend and receive the subscription from it, while also used as a synchronization tool for cells in different views.

What I have tried so far is I have created an atom family for all the cells in my table, those cells will for user be used for different views of that table. This is what I have tried, by creating the useCellValue class function, I wrapped not only the atom update but also the GraphQL update inside of it. It looks fine, so by calling the cellUpdater retrieved from that function, I can update not only the atom but also the backend.

type CellValueQuery = {workspaceId: string, tableId: string, recordId: string, fieldId: string}

export const cellValueStates = atomFamily<CellValue, CellValueQuery>({
  key: 'cell-value-states',
  default: null,
});

class Table {
    cellValueStates: (param: CellValueQuery) => RecoilState<CellValue>;

    useCellValue(cellValueQuery: CellValueQuery): [CellValue, SetterOrUpdater<CellValue>] {
      const [cellValue, setLocalCell] = useRecoilState(this.cellValueStates(cellValueQuery));

      const cellUpdater = (cellValue) => {
        const [setRemoteCell, { data }] = useMutation(UPDATE_CELL_MUTATION);
        setLocalCell(cellValue);
        setRemoteCell({variables: {workspaceId: cellValueQuery.workspaceId, tableId: cellValueQuery.tableId, 
          recordId: cellValueQuery.recordId, fieldId: cellValueQuery.fieldId, cellValue}
        })
      }

      return [cellValue, cellUpdater];
    }
}

So my questions are

1. Since I have many of those cells, I realized that I may need to use the hook useCellValue I created in a for loop or whatever way, I know this is not really possible by design. How am I able to achieve that with recoil?
2. Where can I subscribe to the changes from the GraphQL backend? I am wishing to do it in a centralized place like Table class where all the updates on atoms happened there and those changes can later be propagated to cells in views that are using that atom’s state.

Thanks a lot! As someone who is really new to frontend I am really looking for a best solution for my app and hopefully this can be elegantly done by Recoil!

[drarmstr]

Correct. But, using useRecoilState() to subscribe to local Recoil changes can be useful if you want to setup a bi-direction sync.

Atom Effects were developed to make it easier to setup and define this type of state synchronization. However, they currently don’t support React Hooks, which is problematic for working with GraphQL. We’re pursuing a few options, but the easiest for you now would be to use a component like this with effects to do the state synchronization.

[drarmstr]

We know have the recoil-relay library released for working with GraphQL and Rcoil.