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

Question

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

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

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

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

См. https://facebook.github.io/relay/docs/en/mutations.html.

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

Из комментария RelayConnectionHandler.js для реле времени выполнения здесь: 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), и он не определен.

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

---- Edit ---- Благодаря Денису, я думаю, что одна проблема решена - проблема 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 {курсорный узел {полный текст идентификатора} }

Как мне получить LinkedRecord, вот так?

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

Answer 1

Если 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

создать 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);
    }
  }
}

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