Apollo 中具有本地状态的变量返回数据

Posted 2023-03-10

【中文标题】Apollo 中具有本地状态的变量返回数据

【英文标题】：Variable return data with local state in Apollo

【发布时间】：2019-05-10 23:23:18

【问题描述】：

所以，我正在使用Apollo-link-state 在 React GraphQL 应用程序中管理我的本地状态，我正在尝试在全局状态中存储不同路径的列排序值，例如，如果您使用的是 /people ，您可能按firstName 排序。理想情况下，我只需查询getSorting，传入path 并获取column 和direction。

由于 GraphQL 在设计上非常严格，我不得不编写一些相当丑陋的代码：

export const GET_SORTING_PREF = gql`
    query GET_SORTING_PREF 
      sortingPrefs @client 
        assets 
          column
          direction
        
        liabilities 
          column
          direction
        
        reporting 
          column
          direction
        
        people 
          column
          direction
        
        companies 
          column
          direction
        
      
    
` 

而在 Redux 中，我会忽略 path，在我的 reducer 中有一个开关，然后只返回 column 和 direction。

实际的突变是这样写的（包括一个空返回，所以它不会抱怨）：

  export const setSortingPref = (_, path, column, direction,  cache ) => 
    let  sortingPrefs  = cache.readQuery(
      query: GET_SORTING_PREF
    )

    sortingPrefs[path] = 
      column, direction
    

    cache.writeQuery(
      query: GET_SORTING_PREF,
      data:  sortingPrefs 
    )

    return null;
  

有没有一种巧妙的方法可以让我传递path 并返回适当的值，而无需所有这些愚蠢的重复，或者这就是 GraphQL 应该如何工作的？

【参考方案1】：

使用apollo-link-state 时，您可以define custom resolvers 进行查询和突变。这意味着您的基础数据可以只是一组首选项对象，每个对象都具有三个属性：column、direction 和 path，并且您的自定义解析器可以根据路径找到正确的对象。

const stateLink = withClientState(
  cache,
  defaults: 
    sortingPrefs: [
      // defaults go here
    ]
  ,
  resolvers: 
    Query: 
      // Note the difference in names between this and the default
      sortingPref: (_,  path ,  cache ) => 
        const query = `
          query GetSortingPrefs 
            sortingPrefs @client 
              column
              direction
              path
            
          
        `
        const sortingPrefs = cache.readQuery( query ).sortingPrefs
        return sortingPrefs.find(p => p.path === path)
      
    
  ,
)

显然，如果你走这条路，你需要相应地更新你的突变。