无需调用后端，通过Mutation更新GraphQL数据树方案问询

这个问题问得很实在——很多人刚用GraphQL替代Redux管理状态时，都会默认觉得所有Mutation都得发请求到后端，但其实针对仅前端UI关注、不需要同步服务端的跨组件状态，完全可以只在前端更新GraphQL的数据树，根本不用调用后端。

先说说为什么你会觉得“必须调用后端” #

GraphQL的核心设计是服务端作为单一可信数据源，Mutation的语义本身就是“修改服务端数据”，所以像Apollo Client、Relay这类主流GraphQL客户端，默认会把没有特殊标记的Mutation请求发送到后端，确保前后端数据一致。这是框架的默认行为，但不是硬性要求。

怎么实现纯前端的GraphQL状态更新？ #

主流GraphQL客户端都内置了本地状态管理能力，专门用来处理这种前端专属的跨组件状态。以最常用的Apollo Client为例，你可以这么做：

1. 定义本地Schema和Resolver

先在客户端层面定义前端专属的状态类型和更新逻辑，完全和后端无关：

// 定义本地GraphQL类型
const typeDefs = gql`
  // 扩展Query，用来读取前端状态
  extend type Query {
    uiState: UIState!
  }

  // 前端专属的状态类型（比如侧边栏状态、暗黑模式开关）
  type UIState {
    sidebarOpen: Boolean!
    darkMode: Boolean!
  }

  // 扩展Mutation，用来更新前端状态
  extend type Mutation {
    updateSidebarOpen(open: Boolean!): UIState!
  }
`;

// 本地Resolver，处理前端Mutation的逻辑
const resolvers = {
  Mutation: {
    updateSidebarOpen: (_, { open }, { cache }) => {
      // 从客户端缓存中读取当前的UI状态
      const { uiState } = cache.readQuery({ query: GET_UI_STATE });
      // 更新状态
      const newUIState = { ...uiState, sidebarOpen: open };
      // 把新状态写回客户端缓存
      cache.writeQuery({
        query: GET_UI_STATE,
        data: { uiState: newUIState },
      });
      return newUIState;
    },
  },
};

2. 在组件中调用本地Mutation

调用时给Mutation加上@client指令，告诉客户端这是一个本地操作，不需要发请求到后端：

// 定义带@client标记的本地Mutation
const UPDATE_SIDEBAR = gql`
  mutation UpdateSidebarOpen($open: Boolean!) {
    updateSidebarOpen(open: $open) @client
  }
`;

// 在React组件中使用
const [updateSidebar] = useMutation(UPDATE_SIDEBAR);

// 需要更新时直接调用，完全在前端完成
const toggleSidebar = () => {
  updateSidebar({ variables: { open: !currentSidebarState } });
};

核心思路 #

你可以把GraphQL客户端的缓存当成一个“混合数据源”：

• 需要和后端同步的状态，用普通的Query/Mutation和后端交互；
• 仅前端关注的跨组件状态，用@client标记的本地操作来读写缓存，完全不用后端参与。

这样既保留了GraphQL统一数据查询的优势，又能像Redux一样管理前端专属状态，完美解决你的场景。

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