我正在从 apollo-link-state 迁移到 @apollo/client，如何在不使用 cache.writeData 的情况下将默认数据写入 @apollo/client 的 InMemoryCache？答案

【问题标题】：I am migrating from apollo-link-state to @apollo/client, how do I write default data to InMemoryCache of @apollo/client without using cache.writeData?我正在从 apollo-link-state 迁移到 @apollo/client，如何在不使用 cache.writeData 的情况下将默认数据写入 @apollo/client 的 InMemoryCache？
【发布时间】：2020-11-19 04:25:21
【问题描述】：

我使用 react 16.13，目前正在从 apollo-client 2.x 迁移到 @apollo/client 3.1.1。我从packages.json 中删除了很多依赖库，因为它们中的大多数现在可以直接从@apollo/client 导入。一切都很顺利，直到我从 apollo-link-state 迁移时扔了一块名为“删除默认值”的大石头。

使用@apollo/client 3.x，我们直接从@apollo/client 导入InMemoryCache，这很好。但是withClientState 链接不再存在，ApolloClient 不支持本地缓存的默认值。我找不到任何涵盖此问题的指南。 There is one guide for Angular，但建议使用cache.writeData 来构造缓存。唯一的问题是，在 @apollo/client 的 v3.x 中，InMemoryCache 不再有 writeData 方法。有一个modify 方法，但它也不是很容易使用，至少我无法使它用于此目的。

我有一个很大的“默认”对象：

export default {
  authentication: {
    __typename: 'authentication',
    auth: ''
  },
  UserInfo: {
    __typename: 'UserInfo',
    employee: {
      __typename: 'UserInfoEmployee',
      defaultShopId: '',
      id: '',
      email: '',
      image: {
      __typename: 'image',
      id: '',
      url: ''
    },
    firstName: '',
    lastName: '',
    manager: '',
    boss: ''
    },
    countryCode: '',
    chainId: ''
  },
  defaultShop: {
    __typename: 'defaultShop',
    id: '',
    name: '',
    timeZone: null
  },
  locale: {
    __typename: 'locale',
    locale: getBrowserLocale()
  },
  countries: {
    __typename: 'countries',
    data: []
  },
  Products: {
    __typename: 'Products',
    guid: 0,
    ProductTypes: {
      __typename: 'ProductTypes',
      TypeNumber: 0,
      type: ''
    },
    legacyConfiguration: false,
    version: '1.0.0'
  },
  location: {
    __typename: 'location',
    pathname: '',
    search: '',
    hash: null,
    action: '',
    key: null,
    isQueryActive: false,
    query: null
  }
}

如果不使用cache.writeData，我应该如何将这些默认数据写入InMemoryCache？

【问题讨论】：

尝试使用writeQuery。您将需要查询您的 defaults 形状。 apollographql.com/docs/react/api/core/ApolloClient/…
@UjinT34 谢谢，我相信这是唯一可行的解决方案。我通过对我的默认形状执行查询解决了这个问题。

标签： javascript apollo browser-cache react-apollo apollo-client

【解决方案1】：

请改用writeQuery。我相信在 v3 中，他们开始使用一种通用的方式来设置默认状态。

Official docs

    const query = gql`
        query {
            authentication @client {
                id
                __typename
            }
            ...
        }`
    cache.writeQuery({
        query,
        data: {
            authentication: {
                __typename: 'authentication'
               ...
        }
    })

【讨论】：

【解决方案2】：

它需要使用策略编写，cache.writeQuery 在初始化时对我不起作用，

 cache.policies.addTypePolicies({
    Query: {
      fields: {
        selectedCurrency: {
          read() {
            return "USD";
          },
        },
        selectedIndex: {
          read() {
            return 0;
          },
        },
        bookingFlowStep: {
          read() {
            return '';
          },
        },
        
      },
    },
  });

【讨论】：