Как обновить метаданные соединения в клиентском магазине?

Question

Я пытаюсь изучить Relay, внедряя TodoMVC с нуля. я могу запросить мои данные, как это, который работает хорошо:

query { 
    allTodos(first: 100) { 
    totalCount 
    completedCount 
    edges { 
     node { 
     id 
     text 
     completed 
     } 
    } 
    } 
} 

У меня есть идея, чтобы добавить метаданные totalCount и completedCount в связи с здесь: http://graphql.org/learn/pagination/#end-of-list-counts-and-connections
Это похоже в этом примере: https://github.com/graphql/swapi-graphql/blob/master/src/schema/index.js#L78

Теперь я пишу мутацию для изменения поля completedTodo с учетом его id. Я собираюсь вернуть новый completedCount в мутационную полезную нагрузку, но я не уверен, как реализовать getConfigs(), чтобы обновить его в клиентском магазине. У меня нет id для подключения, не так ли? Есть ли недостаток в моем дизайне схемы? Благодаря!

Answer 1

Предполагая, что ваша мутация возвращает viewer, вам необходимо добавить к вашему viewerfatQuery и getConfigs. Думаю, this tutorial может быть полезно. Вот выдержка, относящаяся к вашей задаче:

Добавление Тодо сложнее. Причиной этого является то, что нам нужно, чтобы обновляло не только состояние объекта Todo, которое мы создадим, но и также соединение, в котором оно хранится - количество Todos изменится, , а также список узлов Todo по краям.

import Relay from 'react-relay'; 

export default class AddTodoMutation extends Relay.Mutation { 
    static fragments = { 
    viewer:() => Relay.QL`fragment on ReindexViewer { 
     id 
     allTodos { 
     count, 
     } 
    }` 
    }; 

    getMutation() { 
    return Relay.QL`mutation{ createTodo }`; 
    } 

    getVariables() { 
    return { 
     text: this.props.text, 
     complete: false, 
    }; 
    } 

    getFatQuery() { 
    return Relay.QL` 
     fragment on _TodoPayload { 
     changedTodoEdge, 
     viewer { 
      id, 
      allTodos { 
      count 
      } 
     } 
     } 
    `; 
    } 

    getConfigs() { 
    return [{ 
     type: 'RANGE_ADD', 
     parentID: this.props.viewer.id, 
     connectionName: 'allTodos', 
     edgeName: 'changedTodoEdge', 
     rangeBehaviors: { 
     '': 'prepend', 
     }, 
    }, { 
     type: 'FIELDS_CHANGE', 
     fieldIDs: { 
     viewer: this.props.viewer.id, 
     }, 
    }]; 
    } 

    getOptimisticResponse() { 
    return { 
     changedTodoEdge: { 
     node: { 
      text: this.props.text, 
      complete: false, 
     }, 
     }, 
     viewer: { 
     id: this.props.viewer.id, 
     allTodos: { 
      count: this.props.viewer.allTodos.count + 1, 
     }, 
     }, 
    }; 
    } 
} 

Для того, чтобы выполнить эту мутацию, нам нужны некоторые данные, которые не могут быть доступны для компонента - идентификатор объекта просмотра и количество соединения allTodos. Поэтому нам нужно указать фрагменты для мутации так же, как мы их укажем для контейнеров.

Наши конфигурации также сложнее на этот раз - нам нужно добавить наш новый Todo в соединение, поэтому мы используем конфигурацию мутаций RANGE_ADD. Реле ожидает, что ребро передается в полезной нагрузке, а не только Todo, Reindex предоставляет для этого changeTodoEdge. Наконец, нам нужно получить обновленный подсчет подключений с сервера и для этого поля просмотра доступно для каждой полезной нагрузки.

В нашем оптимистичном обновлении мы увеличиваем количество всехTodos, так что мы меняем наш «общий» дисплей без каких-либо задержек.