Обновление дерева Graphql без попадания в бэкэнд с мутацией

Question

В настоящее время я использую graphql вместо Redux для некоторых наборов данных управления состоянием.Я обнаружил, что использую мутацию на стороне сервера, но если мой пользовательский интерфейс / внешний интерфейс заботится только об этом, зачем мне создавать мутацию, которая затем попадает на сервер.Есть ли способ пропустить эту часть и установить дерево данных 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 без необходимости создания распознавателя на серверной части.Поэтому я обеспокоен тем, что постоянное попадание в бэкэнд повлечет за собой снижение производительности, ЕСЛИ сохраняемые данные не заботятся и не требуют, чтобы бэкэнд знал о них.

Конечно, мне приходилось писатьмутация во внешнем интерфейсе для этого, но также соответствующая мутация / резольвер на внутреннем интерфейсе ... НО, если мои данные получены из внешнего интерфейса и действительно не имеют никакого значения для базы данных и т. д.служить конечным автоматомКак я могу сделать это, не взаимодействуя с серверной мутацией / распознавателем?

Answer 1

Поскольку похоже, что вы уже используете 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', бар: «Бар», } }

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
}

Прочитайте документы для более полного объяснения и отличных примеров.