GraphQL Apollo 客户端与缓存策略最佳实践

GraphQL Apollo 客户端与缓存策略最佳实践概述Apollo Client 通过规范化缓存与 `typePolicies` 提供细粒度的更新与合并控制。本文以稳定 API 展示查询、变更与缓存策略。客户端初始化与查询import { ApolloClient, InMemoryCache, HttpLink, gql } from '@apollo/client'

const client = new ApolloClient({

link: new HttpLink({ uri: '/graphql' }),

cache: new InMemoryCache({

typePolicies: {

Query: {

fields: {

products: {

keyArgs: ['filter'],

merge(existing = [], incoming: any[]) {

return [...existing, ...incoming]

},

},

},

},

},

}),

})

const PRODUCTS = gql`query Products($filter: String){ products(filter:$filter){ id title } }`

变更与局部更新import { useMutation, gql } from '@apollo/client'

const ADD_PRODUCT = gql`mutation($title:String!){ addProduct(title:$title){ id title } }`

function AddButton() {

const [mutate] = useMutation(ADD_PRODUCT, {

update(cache, { data }) {

cache.modify({

fields: {

products(existing = []) {

return [data?.addProduct, ...existing]

},

},

})

},

})

return <button onClick={() => mutate({ variables: { title: 'New' } })}>Add</button>

}

SSR 集成要点在服务端执行初始查询并注入缓存快照；客户端复用同一缓存配置进行水合。明确 `keyArgs` 与 `merge` 策略，避免重复项与分页错乱。验证要点API 为稳定版本；通过开发者工具与网络面板验证查询/变更与缓存命中。在分页、筛选与乐观更新场景中检查规范化缓存的正确性。