Question

我目前正在使用graphql而不是Redux来处理某些状态管理数据集。我发现我正在使用服务器端的突变，但如果我的UI /前端只关心它，为什么我必须创建一个突然然后命中服务器。有没有办法省略该部分并仅使用来自前端/ UI的一些更新来设置graphql数据树？

这是我的突变

try {
  await updateSomething({
    // front end only cares about these values, but I do 
    // need them across various components etc..
    variables: {
      id,
      name
    },
    update: (store, { data: { someData } }) => {
      const data = store.readQuery({ query: MY_QUERY });
      data.someArray.push(someData);
      store.writeQuery({ query: MY_QUERY, data });
    }
  });
} catch (e) {
 // deal with error
}

我无法弄清楚如何更新graphql树而无需在后端创建解析器。所以我担心不断地击中后端会导致性能损失，如果我保存的数据没有关心或需要后端知道。

当然，为了这个，我不得不在前端写一个变异，但是后端还有一个相应的变异/解析器...但是，如果我的数据来自前端，并且真的没有后果数据库等......它只需要作为一个redux状态机。如何在不与服务器端突变/解析器交互的情况下实现此目的？

Answer 1

由于您似乎已经在使用apollo，因此您应该使用apollo-link-state。状态链接有效地允许您通过apollo管理客户端状态。

您的客户端设置如下所示：

defaults

传递给withClientState的{{1}}定义了您的初始状态，而resolvers对象定义了仅客户端查询和突变的行为。

const defaults = { foo：{ __typename：'Foo'，吧：'酒吧'， } }

const resolvers = {
  Mutation: {
    updateFoo: (_, { bar }, { cache }) => {
      const data = {
        foo: {
          bar,
          __typename: 'Foo'
        }
      }
      cache.writeData({ data })
      return data.foo
    }
  }
}

然后，您可以使用@client指令来识别应使用状态链接解析的突变和查询：

mutation DoSomething($bar: String) {
  updateFoo(bar: $bar) @client
}

Read the docs有更完整的解释和很好的例子。

更新Graphql Tree没有用变异命中后端

1 个答案: