如何使用apollo-link-state更新缓存并返回异步解析器

我来给你详细拆解如何用apollo-link-state完成缓存更新并编写异步解析器，结合你提供的代码片段一步步说明：

1. 前置依赖与导入 #

首先确保你已经导入了所需的依赖：查询语句、axios、错误处理工具以及配置的URL，这些是后续逻辑的基础：

import { LOGIN_FORM_QC as query } from '../../querys'
import axios from 'axios'
import axiosError from '../axiosError'
import {URL} from '../../config'

2. 缓存更新工具函数newState #

这个函数是核心的缓存操作封装，负责读取现有缓存、合并新状态、写回缓存：

const newState = (cache, object) => {
  // 从缓存中读取当前的登录表单状态
  const state = cache.readQuery({query})
  // 合并新的状态数据，保持原有结构不变，只更新传入的字段
  const data = { 
    ...state, 
    loginForm: { 
      ...state.loginForm, 
      ...object 
    } 
  }
  // 将合并后的新状态写回缓存
  cache.writeQuery({query, data})
  return null
}

这里的关键点是使用扩展运算符(...)进行不可变更新，避免直接修改缓存原对象，保证Apollo能正确追踪状态变化。

3. 异步解析器实现 #

接下来是默认导出的解析器函数，它会处理GraphQL请求，执行异步操作（比如登录请求），同时更新缓存状态：

export default (_, input, {cache}) => {
  // 先更新缓存，标记登录状态为加载中
  newState(cache, { loading: true, error: null })

  // 发起异步登录请求
  return axios.post(`${URL}/login`, input)
    .then(res => {
      // 请求成功后，更新缓存中的登录状态和数据
      newState(cache, { 
        loading: false, 
        user: res.data.user,
        token: res.data.token
      })
      return res.data
    })
    .catch(err => {
      // 请求失败时，更新缓存中的错误信息
      const errorMsg = axiosError(err)
      newState(cache, { loading: false, error: errorMsg })
      throw new Error(errorMsg)
    })
}

这个解析器做了三件事：

• 请求开始时，更新缓存标记loading为true，清除之前的错误
• 发起异步POST请求到登录接口
• 根据请求结果成功/失败，分别更新缓存状态，成功返回数据，失败抛出错误

关键注意事项 #

• 确保你的LOGIN_FORM_QC查询语句定义了loginForm相关的字段，这样cache.readQuery才能正确读取到对应状态
• 异步解析器必须返回一个Promise，这样Apollo才能正确处理异步流程
• 使用不可变更新是Apollo缓存更新的最佳实践，避免直接修改缓存对象导致状态追踪异常

内容的提问来源于stack exchange，提问作者someone from belgium is called