магазин обновлений реле призмы graphql - PullRequest
Новая
       19

магазин обновлений реле призмы graphql

0 голосов
/ 07 декабря 2018

Я пытаюсь заставить работать призму и реле.Вот мой репо:

https://github.com/jamesmbowler/prisma-relay-todo

Это простой список задач.Я могу добавить задачи, но пользовательский интерфейс не обновляется.Когда я обновляюсь, то есть дело.

Все примеры обновления магазина, которые я могу найти, используют «родительский» объект, который обновляется / создается.

См. https://facebook.github.io/relay/docs/en/mutations.html#using-updater-and-optimisticupdater

Кроме того, для «настроек обновлений» также требуется «parentID».https://facebook.github.io/relay/docs/en/mutations.html#updater-configs

Из комментария RelayConnectionHandler.js relay-runtime здесь: https://github.com/facebook/relay/blob/master/packages/relay-runtime/handlers/connection/RelayConnectionHandler.js#L232

 * store => {
 *   const user = store.get('<id>');
 *   const friends = RelayConnectionHandler.getConnection(user, 'FriendsFragment_friends');
 *   const edge = store.create('<edge-id>', 'FriendsEdge');
 *   RelayConnectionHandler.insertEdgeAfter(friends, edge);
 * }

Можно ли обновить магазин, не имея «родителя»?У меня просто есть задачи, без родителей.

Опять же, создание записи работает и дает следующий ответ:

{"data": {"createTodo": {"id": "cjpdbivhc00050903ud6bkl3x", "name": "testing", "complete": false}}}

Вот моя функция обновления 

updater: store => {
          const payload = store.getRootField('createTodo');

          const conn = ConnectionHandler.getConnection(store.get(payload.getDataID()), 'Todos_todoesConnection');

          ConnectionHandler.insertEdgeAfter(conn, payload, cursor);

},

Я сделал console.log (conn), и он не определен.

Пожалуйста, помогите.

---- Редактировать ---- Спасибо Денис, я думаю, что одна проблема заключается врешено - это ConnectionHandler.

Но я до сих пор не могу получить интерфейс для обновления.Вот что я попробовал в функции обновления: 

const payload = store.getRootField('createTodo');
const clientRoot = store.get('client:root');
const conn = ConnectionHandler.getConnection(clientRoot, 'Todos_todoesConnection');
ConnectionHandler.createEdge(store, conn, payload, 'TodoEdge');

Я также попробовал это: 

const payload = store.getRootField('createTodo');
const clientRoot = store.get('client:root');
const conn = ConnectionHandler.getConnection(clientRoot, 'Todos_todoesConnection');
ConnectionHandler.insertEdgeAfter(conn, payload);

Моя форма данных отличается от их примера, поскольку я неиметь «todoEdge» и «узел» внутри моих возвращенных данных (см. выше).

todoEdge {курсор узла {полный идентификатор текста}}

Как мнеgetLinkedRecord, как это?

const newEdge = payload.getLinkedRecord('todoEdge');

1 Ответ

0 голосов
/ 07 декабря 2018

Если query является родителем, parentID будет client:root.

Взгляните на это: https://github.com/facebook/relay/blob/1d72862fa620a9db69d6219d5aa562054d9b93c7/packages/react-relay/classic/store/RelayStoreConstants.js#L18

Также в этом выпуске: https://github.com/facebook/relay/issues/2157#issuecomment-385009482

создайте const ROOT_ID = 'client:root'; и передайте ROOT_ID в качестве parentID,Кроме того, проверьте имя вашего подключения в программе обновления, оно должно быть точно таким же, как имя, в котором вы объявили запрос.

ОБНОВЛЕНИЕ : На самом деле вы можете импортировать ROOT_ID изrelay-runtime

import { ROOT_ID } from 'relay-runtime';

ОБНОВЛЕНИЕ 2 :

Ваше изменение не очень понятно для меня, но я приведу вам примердолжно работать нормально?После запуска вашей мутации вы сначала получаете доступ к данным, используя getRootField, как и вы.Итак, если у меня есть мутация вроде: 

  mutation UserAddMutation($input: UserAddInput!) {
    UserAdd(input: $input) {
      userEdge {
        node {
          name
          id
          age
        }
      }
      error
    }
  }

Вы сделаете: 

const newEdge = store.getRootField('UserAdd').getLinkedRecord('userEdge');
      connectionUpdater({
        store,
        parentId: ROOT_ID,
        connectionName: 'UserAdd_users',
        edge: newEdge,
        before: true,
      });

Эта connectionUpdater - вспомогательная функция, которая выглядит следующим образом: 

export function connectionUpdater({ store, parentId, connectionName, edge, before, filters }) {
  if (edge) {
    if (!parentId) {
      // eslint-disable-next-line
      console.log('maybe you forgot to pass a parentId: ');
      return;
    }

    const parentProxy = store.get(parentId);

    const connection = ConnectionHandler.getConnection(parentProxy, connectionName, filters);

    if (!connection) {
      // eslint-disable-next-line
      console.log('maybe this connection is not in relay store yet:', connectionName);
      return;
    }

    const newEndCursorOffset = connection.getValue('endCursorOffset');
    connection.setValue(newEndCursorOffset + 1, 'endCursorOffset');

    const newCount = connection.getValue('count');
    connection.setValue(newCount + 1, 'count');

    if (before) {
      ConnectionHandler.insertEdgeBefore(connection, edge);
    } else {
      ConnectionHandler.insertEdgeAfter(connection, edge);
    }
  }
}

Надеюсь, это поможет:)

...