Question

我有一个注释连接处于突变状态，这是查询：

    export default mutationFromQuery(graphql`
  mutation AddBookMutation($input: AddBookInput! $count: Int $cursor: String ) {
    addBook(input: $input) {
      book {
        __typename
        cursor
        node {
          id
          title
          owner
          createdAt
          comments(first: $count, after: $cursor)
          @connection(key: "BookComments_comments", filters: []) {
            __typename
            edges { 
              node { 
                id
              }
            }
          }
        }
      }
    }
  }
`)

这是我做了不起作用的optimisticUpdater的方式：

optimisticUpdater: (store) => {
  const userProxy = store.get(viewerId)
  const owner = userProxy.getValue('username')
  const id = uuidv1();
  const book = store.create(id, 'Book');
  book.setValue(id, 'id');
  book.setValue(bookTitle, 'title');
  book.setValue(owner, 'owner');
  book.setValue(Date.now(), 'createdAt');
  const comments = store.create(uuidv1(), 'comments')
  comments.setLinkedRecords([], 'edges')
  const pageInfo = store.create(uuidv1(), 'pageInfo')
  pageInfo.setValue(null, 'endCursor')
  pageInfo.setValue(false, 'hasNextPage')
  pageInfo.setValue(false, 'hasPreviousPage')
  pageInfo.setValue(null, 'startCursor')
  comments.setLinkedRecord(pageInfo, 'pageInfo')
  book.setLinkedRecord(comments, 'comments')
  const bookEdge = store.create(uuidv1(), 'BookEdge');
  bookEdge.setLinkedRecord(book, 'node');
  console.log('bookEdge ', bookEdge)
  booksUpdater(userProxy, bookEdge);
},

我的问题是，注释总是以未定义结尾，如您在上面看到的，我已经设置了它。我也这样做了，但是我仍然没有获得乐观的用户界面：

    optimisticResponse: {
      addBook: {
        book: {
          __typename: 'BookEdge',
          cursor: uuidv1(),
          node: {
            id: uuidv1(),
            title: bookTitle,
            owner: username,
            createdAt: Date.now(),
            comments: {
              __typename: 'CommentConnection',
              edges: [],
              pageInfo: {
                endCursor: null,
                hasNextPage: false
              }
            }
          }
        }
      }
    },

应用程序不会因optimisticResponse代码而崩溃，但不会导致乐观的UI效果，但是随着optimisticUpdater崩溃，注释未定义，导致崩溃，现在我要使用更新程序了：

updater: (store) => {
   const userProxy = store.get(viewerId)
   const payload = store.getRootField('addBook');
   booksUpdater(userProxy, payload.getLinkedRecord('book'));
},

由于注释未定义，我想我们不能将其用于乐观效果：

  const comments = store.create(uuidv1(), 'comments')
  comments.setLinkedRecords([], 'edges')
  book.setLinkedRecord(comments, 'comments')

在我的书上，这是查询，其中的注释片段在使用上述代码进行乐观更新时未定义：

export default createRefetchContainer(
  BookItem,
  {
    book: graphql`
      fragment BookItem_book on Book
        @argumentDefinitions(
          count: { type: "Int", defaultValue: 5 }
          cursor: { type: "String", defaultValue: null }
        ) {
        id
        title
        owner
        createdAt
        ...BookComments_book  
      }
    `
  },
  graphql`
    query BookItemQuery($id: ID!, $count: Int, $cursor: String) {
      book: node(id: $id) {
        ...BookItem_book @arguments(count: $count, cursor: $cursor)
      }
    }
  `
);

，现在对获取book.comments.edges的注释组件的查询是未定义的：

export default createPaginationContainer(
  BookComments,
  {
    book: graphql`
      fragment BookComments_book on Book 
      @argumentDefinitions(
        count: { type: "Int", defaultValue: 3 }
        cursor: { type: "String", defaultValue: null }
      ) {
        id
        title
        comments(first: $count, after: $cursor)
          @connection(key: "BookComments_comments", filters: []) {
            __typename
          edges {
            node {
              id
              text
              owner
              createdAt
            }
          }
          pageInfo {
            startCursor
            endCursor
            hasPreviousPage
            hasNextPage
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps: (props) => props.book && props.book.comments,
    getFragmentVariables: (prevVars, totalCount) => ({
      ...prevVars,
      count: totalCount
    }),
    getVariables: (props, { count, cursor }, _fragmentVariables) => ({
      count,
      cursor,
      id: props.book.id
    }),
    query: graphql`
      query BookCommentsQuery($id: ID!, $count: Int, $cursor: String) {
        book: node(id: $id) {
          ...BookComments_book @arguments(count: $count, cursor: $cursor)
        }
      }
    `
  }
);

也许这是一种反模式？但我只是想对此保持乐观

Answer 1

对于这些组件和查询的工作方式，我仍然不太清楚，因此我稍后将更新此答案。（我不知道您是否要通过node（）查询乐观地返回新书或将其添加到书的某些列表/连接中）

请检查我是否使用了正确的类型名称（CommentConnection / CommentConnection等）

optimisticUpdater: (store) => {
  const userProxy = store.get(viewerId)
  const owner = userProxy.getValue('username')
  const commentsParams = {  // must be same keys and values as in comments(first: $count, after: $cursor)
    first: count,
    after: cursor
  }

  // Create Book
  const id = uuidv1();
  const book = store.create(id, 'Book');
  book.setValue(id, 'id');
  book.setValue(bookTitle, 'title');
  book.setValue(owner, 'owner');
  book.setValue(Date.now(), 'createdAt');

  // Create comments connection
  const comments = store.create(uuidv1(), 'CommentConnection')
  comments.setLinkedRecords([], 'edges')

  // Create PageInfo
  const pageInfo = store.create(uuidv1(), 'PageInfo')
  pageInfo.setValue(null, 'endCursor')
  pageInfo.setValue(false, 'hasNextPage')
  pageInfo.setValue(false, 'hasPreviousPage')
  pageInfo.setValue(null, 'startCursor')

  // Link created records
  comments.setLinkedRecord(pageInfo, 'pageInfo')
  book.setLinkedRecord(comments, 'comments', commentsParams) // don't forget commentsParams with same values as are used in comments graphql query

  // I'm not sure about this final part, because I don't really get how that app works, but if you want this book to show as optimistic response for `node(id: $id)`, you'll do something like this:
  store.getRoot().setLinkedRecord(book, 'node', { id: id }) // same id as used in BookItemQuery
}

如何乐观地中继现代突变中的连接特性？

1 个答案: