使用 GraphQL(Apollo)、React 动态（服务器端）添加和删除 ag-grid 中的列

Question

我有以下问题：

我正在使用 GraphQL 从包含许多列的巨大表中查询数据。用户希望能够根据自己的喜好添加/删除列。我知道 ag-grid 提供添加/删除列，但仅限客户端（所有列均已加载）。由于表的大小，这是不可能的。我正在尝试动态构建所需的字段列表，将它们添加到 GraphQL 查询中并再次运行查询。 （同样，因为它在页面加载时运行一次。）

以下是查询示例：

  query headers{
    getHeaders{
      headerId
      name
      description
      date
    }
  }

这就是我目前拨打电话的方式：

const GET_HEADERS = gql`
    query headers {
        getHeaders {
            ${headerFields.join('\n')}
        }
    }
`;

const { loading, error, data } = useQuery(GET_HEADERS);
setRowData(data.getHeaders);

headerFields

已更新，但我如何要求 Apollo 获取新的查询字符串并再次执行它？

我见过很少有人说动态队列不是一个好的实践，但在这种情况下我看不到其他解决方案。我尝试过使用

refetch()

但它不会更改查询字段。它基本上更新了缓存。

我有什么选择？

Answer 1

想到的最简单的方法是使用组件。

1. ComponentA - 具有允许用户选择他/她想要的字段的控件，将该列表保存为 state。该组件会将查询构建为用于调用的prop
ComponentB - 这将使用
2. useQuery

    执行通过 prop 传入的查询并渲染结果。

这样，每当用户通过编辑字段列表更改 ComponentA 的

state 时，ComponentB 将被迫重新运行查询并重新渲染。