基于GraphQL(Apollo)与React实现ag-grid服务端动态增删列问题

方案1：用useMemo动态生成查询文档，触发自动重查 #

当headerFields变化时，重新生成GraphQL查询文档，让useQuery识别为新查询并自动执行：

import { gql, useQuery } from '@apollo/client';
import { useMemo, useEffect } from 'react';

// 基于当前选中字段动态生成查询
const GET_HEADERS = useMemo(() => gql`
    query headers {
        getHeaders {
            ${headerFields.join('\n')}
        }
    }
`, [headerFields]);

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

// 数据更新时同步到表格
useEffect(() => {
  if (data) {
    setRowData(data.getHeaders);
  }
}, [data]);

原理：useMemo会在headerFields变化时生成新的DocumentNode实例，useQuery检测到查询对象变化，会自动发起新的请求获取对应字段的数据。

方案2：使用useLazyQuery手动触发查询 #

如果需要更灵活的触发时机（比如用户点击确认按钮后再更新），可以用useLazyQuery手动控制查询执行：

import { gql, useLazyQuery } from '@apollo/client';
import { useEffect } from 'react';

// 定义动态查询，每次headerFields变化时会生成新的查询内容
const [fetchHeaders, { loading, error, data }] = useLazyQuery(gql`
    query headers {
        getHeaders {
            ${headerFields.join('\n')}
        }
    }
`);

// 当字段列表变化时，手动触发查询
useEffect(() => {
  fetchHeaders();
}, [headerFields, fetchHeaders]);

// 同步数据到表格
useEffect(() => {
  if (data) {
    setRowData(data.getHeaders);
  }
}, [data]);

原理：useLazyQuery返回的触发函数fetchHeaders，每次调用都会执行当前最新的查询（基于更新后的headerFields），从而获取新字段的数据。

方案3：后端支持字段变量（推荐的规范做法） #

如果能修改后端，建议把字段列表作为查询变量传递，这是更符合GraphQL规范的方式，避免前端动态拼接查询字符串：

后端定义示例（假设用GraphQL.js） #

type Header {
  headerId: ID!
  name: String!
  description: String
  date: String
}

type Query {
  getHeaders(fields: [String!]!): [Header!]!
}

后端解析时，根据传入的fields参数过滤返回的字段（具体实现取决于你的后端框架）。

前端调用示例 #

import { gql, useQuery } from '@apollo/client';
import { useEffect } from 'react';

const GET_HEADERS = gql`
    query headers($fields: [String!]!) {
        getHeaders(fields: $fields) {
            # 这里可以保留基础字段，或者让后端完全根据fields返回
            headerId
            name
            ${headerFields.filter(f => !['headerId', 'name'].includes(f)).join('\n')}
        }
    }
`;

const { loading, error, data } = useQuery(GET_HEADERS, {
  variables: { fields: headerFields },
});

useEffect(() => {
  if (data) {
    setRowData(data.getHeaders);
  }
}, [data]);

原理：通过变量传递字段列表，后端按需返回数据，前端只需要更新variables，useQuery会自动重新执行查询，无需动态拼接查询字符串，安全性和可维护性更好。

注意事项 #

• 动态拼接查询时，要限制用户只能选择预定义的合法字段，避免GraphQL注入风险。
• Apollo会缓存不同查询的结果，切换字段组合时如果之前请求过，会直接读取缓存，提升性能。

内容的提问来源于stack exchange，提问作者Noonewins