reactjs - Apollo js 订阅乐观 UI

Question

使用 Optimistic UI 进行订阅有意义吗？

所以基本上:

addChannelMutation({
  variables: { name: eventValue },
  optimisticResponse: {
    __typename: "Mutation",
    addChannel: {
      __typename: "Channel",
      id: data.channels.length,
      name: eventValue
    }
  },
  update: (store, { data: { addChannel } }) => {
    // Read the data from our cache for this query.
    const data = store.readQuery({ query: channelsListQuery });
    // Add our comment from the mutation to the end.
    data.channels.push(addChannel);
    // Write our data back to the cache.
    store.writeQuery({ query: channelsListQuery, data });
  }
}).then(res => {});

它添加了两次相同的项目，从而触发重复键异常。 那么乐观的 ui 对订阅有意义吗？

Answer 1

optimisticResponse 在服务器收到响应之前触发 update。然后，当服务器响应时，update 再次被触发，并用响应替换乐观占位符。

订阅仅在服务器突变解决后才会发出，因此本质上是在服务器响应时发出。

如果您没有包含乐观 UI 并且存在任何类型的延迟，则在服务器发送响应之前结果不会显示。这可能是一个问题，例如在聊天应用程序中，如果用户单击发送按钮后没有立即看到消息。他们会不断点击按钮并多次发送消息:/

为了在使用 Optimisic UI 和订阅时打击欺骗，有两种策略:

1. 检查客户端上是否存在欺骗行为:

   在update和updateQuery函数中:

   // super simplified dupe doc checker
   function isDuplicateDocument(newDocument, existingDocuments) {
     return newDocument.id !== null && existingDocuments.some(doc => newDocument.id === doc.id);
   }
   
   addChannelMutation({
     variables: { name: eventValue },
     optimisticResponse: {
       __typename: "Mutation",
       addChannel: {
         __typename: "Channel",
         id: data.channels.length,
         name: eventValue
       }
     },
     update: (store, { data: { addChannel } }) => {
       // Read the data from our cache for this query.
       const data = store.readQuery({ query: channelsListQuery });
       if (isDuplicateDocument(addChannel, data.channels) {
         return;
       }
   
       // Add our comment from the mutation to the end.
       data.channels.push(addChannel);
       // Write our data back to the cache.
       store.writeQuery({ query: channelsListQuery, data });
     }
   }).then(res => {});
   

   以及您订阅中的 updateQuery 内:

   subscribeToMore({
     ...
     updateQuery: (previousResult, { subscriptionData }) => {
       const newChannel = subscriptionData.data.addChannel;
       // if it's our own mutation
       // we might get the subscription result
       // after the mutation result.
       if (isDuplicateDocument(
         newChannel, previousResult.channels)
       ) {
         return previousResult;
       }
   
       return update(previousResult, {
         channels: {
           $push: [newChannel],
         },
       });
     },
   

2. 或者您可以限制服务器上的订阅，使其不发送给新 channel 的创建者。