如何将对象数组粘贴到 GraphQL Apollo 缓存中？

Posted 2023-03-10

【中文标题】如何将对象数组粘贴到 GraphQL Apollo 缓存中？

【英文标题】：How to paste array of objects into GraphQL Apollo cache?

【发布时间】：2021-07-22 19:01:56

【问题描述】：

我从 Apollo 后端收到了一系列没有 ID 字段的国家/地区。

export const QUERY_GET_DELIVERY_COUNTRIES = gql`
    query getDeliveryCountries 
        deliveryCountries 
            order
            name
            daysToDelivery
            zoneId
            iso
            customsInfo
        
    
`

这些对象的架构：

    customsInfo: null
    daysToDelivery: 6
    iso: "UA"
    name: "Ukraine"
    order: 70
    zoneId: 8
    __typename: "DeliveryCountry"

在嵌套组件中，我从 client.readQuery 读取这些对象。 我想要的是将它插入到 localStorage，最初读取它并将此数据写入 Apollo 客户端缓存。

我已经尝试过的事情：

useEffect(() => 
    const deliveryCountries = JSON.parse(localStorage.getItem('deliveryCountries') || '[]')
    if(!deliveryCountries || !deliveryCountries.length) 
        getCountriesLazy()
     else 
        deliveryCountries.map((c: DeliveryCountry) => 
            client.writeQuery(
                query: QUERY_GET_DELIVERY_COUNTRIES,
                data: 
                    deliveryCountries: 
                        __typename: "DeliveryCountry",
                        order: c.order,
                        name: c.name,
                        daysToDelivery: c.daysToDelivery,
                        zoneId: c.zoneId,
                        iso: c.iso,
                        customsInfo: c.customsInfo
                    
                
            )
        )
    
, [])

但是在执行上面的代码之后，我在国家缓存中只有一个对象。如何在没有显式 ID 的情况下编写所有对象，我该怎么做？还是我做错了什么？

【参考方案1】：

哈哈。我只需要将数组放入必要的字段而不进行迭代。 writeQuery 替换所有数据并且不添加任何“到末尾”。

client.writeQuery(
    query: QUERY_GET_DELIVERY_COUNTRIES,
    data: 
        deliveryCountries: deliveryCountries
    
)