时间戳

首页 > 解决方案 > 更新 Graphql 树，不使用突变命中后端

redux - 更新 Graphql 树，不使用突变命中后端

问题描述

我目前正在使用 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
}
  1. 我无法弄清楚如何在无需在后端创建解析器的情况下更新 graphql 树。所以我担心如果我保存的数据不关心或不需要后端知道的话，不断地访问后端会导致性能下降。

当然，我必须为此在前端编写一个突变，还要在后端编写一个相应的突变/解析器......但是，如果我的数据来自前端，并且对数据库等没有任何影响。 .. 它只需要作为一个 redux 状态机。如何在不与服务器端突变/解析器交互的情况下完成此操作？

标签： reduxgraphql

解决方案

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

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

import { ApolloClient } from 'apollo-client'
import { ApolloLink } from 'apollo-link'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { withClientState } from 'apollo-link-state'

const cache = new InMemoryCache()
const stateLink = withClientState({
  cache,
  resolvers,
  defaults,
})
const client = new ApolloClient({
  cache,
  link: ApolloLink.from([stateLink, new HttpLink()]),
})

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

const defaults = { foo: { __typename: 'Foo', bar: 'Bar', } }

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
}

阅读文档以获得更完整的解释和出色的示例。

推荐阅读