Обновление Apollo создает дублирующую запись в магазине

Обертка HOC:

const CreateAssignmentDialogWithData = compose(
  graphql(CreateAssignmentMutation, {
    props: props => ({
      onAddAssignment: (
        title,
        description,
        assignDate,
        dueDate,
        classId,
        unitId,
        startDate,
        endDate
      ) =>
        props.mutate({
          variables: {
            title: title,
            description: description || "No description",
            assignDate: assignDate,
            dueDate: dueDate,
            classId: classId,
            unitId: unitId
          }
        })
    }),
    options: ({ startDate, endDate, classId }) => ({
      update: (proxy, { data: { putAssignment } }) => {
        const data = proxy.readQuery({
          query: ClassFeedQuery,
          variables: {
            startDate: startDate,
            endDate: endDate,
            classId: classId
          }
        });
        data.getAssignmentsForClassRange.push(putAssignment);
        proxy.writeQuery({ query: ClassFeedQuery, data });
      }
    })
  }),

Мутация работает, и Assignment создается в базе данных, но не обновляет пользовательский интерфейс. Используя Apollo Devtools, я вижу, что в магазине есть две записи для getAssignmentsForClassRange. Отображаемый (отсутствует вновь созданное назначение) -

getAssignmentsForClassRange({
  "startDate":"2018-04-16T07:00:00.000Z",
  "endDate":"2018-04-23T06:59:59.999Z",
  "classId":"226b64c4-e585-4703-a446-4515921c94f2"
}): [Assignment]

В то время как тот, который содержит новое назначение, отображается как

getAssignmentsForClassRange({}): [Assignment]

Отсутствующие параметры здесь не имеют для меня особого смысла, так как он все еще получает правильные назначения (включая новое). Как мне сделать так, чтобы мой update добавлял новое назначение непосредственно к запросу вместо того, чтобы создавать это новое? Или есть другой способ получить обновления пользовательского интерфейса в реальном времени?

Немного сложно понять, что вы пытаетесь сделать. В Apollo есть раздел о том, как обновить хранилище / кеш из результатов мутации, возможно, это поможет: apollographql.com/docs/angular/features/… Edit: React link здесь: apollographql.com/docs/react/essentials/mutations.html#updat‌ e

Herku 22.04.2018 13:19

Вы пишете в кеш-хранилище новый запрос, поэтому он не может обновить ваш пользовательский интерфейс. proxy.readQuery должен иметь тот же запрос и параметры, что и proxy.writeQuery.

tuan.tran 23.04.2018 04:29
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Что такое Apollo Client и зачем он нужен?
Что такое Apollo Client и зачем он нужен?
Apollo Client - это полнофункциональный клиент GraphQL для JavaScript-приложений, который упрощает получение, управление и обновление данных в...
1
2
226
0

Другие вопросы по теме