首页 文章

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

提问于
浏览
0

所以,我正在使用 Apollo-link-state 在React GraphQL应用程序中管理我的本地状态,我'm trying to store column sorting values for different paths in global state, so for example if you'在 /people 上,你可能会按 firstName 进行排序 . 理想情况下,我只是查询 getSorting ,传入 path 并获取 columndirection .

因为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中有一个开关,并返回 columndirection .

实际的变异是这样编写的(包括null返回所以它不会抱怨):

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 回答

  • 0

    使用 apollo-link-state 时,您可以define custom resolvers查询和突变 . 这意味着您的基础数据可以只是一个首选项对象数组,每个数据库都有三个属性: columndirectionpath ,您的自定义解析程序可以根据路径找到正确的解析器 .

    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)
          }
        }
      },
    })
    

    显然,如果你走这条路,你需要相应地更新你的变异 .

相关问题