Question

目前，我们偶然发现了在现代接力中做突变的问题。我们有一本包含许多条目的日记。每当用户添加日记不存在的日期时，我们也会在创建条目之前创建日记。一切都按预期工作，但UI在突变后不会立即更新。这是代码。

AddDiaryMutation

import { commitMutation, graphql } from 'react-relay';

const mutation = graphql`
mutation AddDiaryMutation($input: AddDiaryInput!) {
  createDiary(input: $input) {
     diary {
        id
        ...EntryList_entries
     }
  }
}
`;

let clientMutationId = 0;

const commit = (environment, { date }, callback) =>
commitMutation(environment, {
    mutation,
    variables: {
      input: {
        date,
        clientMutationId: clientMutationId++
      }
    },
    onCompleted: response => {
    const id = response.createDiary.diary.id;
    callback(id);
  }
});

export default { commit };

AddEntryMutation将从AddDiaryMutation响应中获取id以添加条目。

import { commitMutation, graphql } from 'react-relay';
import { ConnectionHandler } from 'relay-runtime';

const mutation = graphql`
mutation AddEntryMutation($input: AddEntryInput!) {
   createEntry(input: $input) {
     entryEdge {
       node {
         id
         project {
           name
         }
         speaker {
            name
         }
        } 
      }
     }
    }
   `;

function sharedUpdater(store, diaryId, newEdge) {
    const diaryProxy = store.get(diaryId);
    const conn = ConnectionHandler.getConnection(diaryProxy, 
       'EntryList_entries');
    ConnectionHandler.insertEdgeAfter(conn, newEdge);
} 

let clientMutationId = 0;

  const commit = (environment, { diaryId, ...rest }, callback) =>
     commitMutation(environment, {
       mutation,
       variables: {
         input: {
            ...rest,
            clientMutationId: clientMutationId++
         }
       },
       updater: store => {
          const payload = store.getRootField('createEntry');
          const newEdge = payload.getLinkedRecord('entryEdge');
          sharedUpdater(store, diaryId, newEdge);
       },
       onCompleted: () => callback()
});

export default { commit };

EntryList片段

fragment EntryList_entries on Diary {
  entries(first: 20) @connection(key: "EntryList_entries", filters: []) 
{
    edges {
      node {
        ...Entry_entry
      }
    }
  }
}

条目片段

fragment Entry_entry on Entry {
  id
  project {
    name
  }
  speaker {
    name
  }
}

Answer 1

我也遇到过这个更新程序的问题。我建议在每个变量上使用console.log并查看链条制动器的位置。我的getConnection方法有问题（我正在更改我的架构以包括边缘）。您还可以从您的环境中控制登录商店以检查那里的记录。

在进行后续突变后，继电器不会更新

1 个答案: