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

Question

因此，我正在使用 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，在我的减速器中有一个开关，而 return 只是 column 和 direction.

实际的 mutation 是这样写的（包括一个 null return 所以它不会抱怨）：

  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 和 return 适当的值，而无需所有这些愚蠢的重复，或者这就是 GraphQL 应该如何工作的？

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

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

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

Variable return data with local state in Apollo

apollo

reactjs

graphql

graphql-js

react-apollo