进行后续突变后中继不更新

Posted 2023-03-08

【中文标题】进行后续突变后中继不更新

【英文标题】：Relay not updating after doing subsequent mutations

【发布时间】：2018-04-14 15:53:54

【问题描述】：

目前，我们偶然发现了在现代接力中进行突变的问题。我们有一本包含许多条目的日记。每当用户添加不存在哪一天日记的条目时，我们也会在创建条目之前创建一个日记。一切都按预期工作，但 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
  

【参考方案1】：

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