Reactjs readQuery在Apollo&；中不使用分页；GraphQL应用程序

我已经为我的应用程序进行了以下设置。我有一个

LinkList

组件，它呈现

Link

组件的列表。然后我还有一个

CreateLink

组件来创建新链接。使用

react-router

在不同的路由下呈现这两种路由：

<Switch>
  <Route exact path='/create' component={CreateLink}/>
  <Route exact path='/:page' component={LinkList}/>
</Switch>

我正在使用Apollo客户端，希望在

CreateLink

组件中创建新的

Link

后，使用命令存储API更新列表

await this.props.createLinkMutation({
  variables: {
    description,
    url,
    postedById
  },
  update: (store, { data: { createLink } }) => {
    const data = store.readQuery({ query: ALL_LINKS_QUERY }) // ERROR
    console.log(`data: `, data)
  }
})

问题是

store.readQuery（…）

抛出错误：

proxyConsole.js:56 Error: Can't find field allLinks({}) on object (ROOT_QUERY) {
  "allLinks({\"first\":2,\"skip\":10})": [
    {
      "type": "id",
      "id": "Link:cj3ucdguyvzdq0131pzvn37as",
      "generated": false
    }
  ],
  "_allLinksMeta": {
    "type": "id",
    "id": "$ROOT_QUERY._allLinksMeta",
    "generated": true
  }
}.

下面是我如何获取我的

LinkList

组件中的链接列表：

export const ALL_LINKS_QUERY = gql`
  query AllLinksQuery($first: Int, $skip: Int) {
    allLinks(first: $first, skip: $skip) {
      id
      url
      description
      createdAt
      postedBy {
        id
        name
      }
      votes {
        id
      }
    }
    _allLinksMeta {
      count
    }
  }
`

export default graphql(ALL_LINKS_QUERY, {
  name: 'allLinksQuery',
  options: (ownProps) => {
    const { pathname } = ownProps.location
    const page = parseInt(pathname.substring(1, pathname.length))
    return {
      variables: {
        skip: (page - 1) * LINKS_PER_PAGE,
        first: LINKS_PER_PAGE
      },
      fetchPolicy: 'network-only'
    }
  }
}) (LinkList)

---

我猜这个问题可能与我的分页方法有关，但我仍然不知道如何解决它。有人能给我指出正确的方向吗？

如何从商店中读取分页列表取决于您如何分页。如果您使用的是

fetchMore

，那么所有数据都将存储在查询的原始键下，在本例中，我猜是使用

{first:2，skip:0}

获取的。这意味着为了从存储中读取更新的列表，您必须使用相同的参数，使用

{first:2，skip:0}

作为变量

PS:Apollo这样做的原因是，它仍然允许您通过一个变异或更新存储相对轻松地更新列表。如果每个页面被单独存储，则在列表的中间或开始时插入一个项目将非常复杂，因为所有的页面都可能需要被移位。p>

---

这就是说，我们可能会引入一个名为

@connection（name:“ABC”）

的新客户端指令，该指令将允许您明确指定连接存储在哪个键下，而不是自动将其存储在原始变量下。如果您想在Apollo Client上发表一篇文章，很高兴再多谈一谈。

所以。。。你是怎么修好的？

export const ALL_LINKS_QUERY = gql`
  query AllLinksQuery($first: Int, $skip: Int) {
    allLinks(first: $first, skip: $skip) {
      id
      url
      description
      createdAt
      postedBy {
        id
        name
      }
      votes {
        id
      }
    }
    _allLinksMeta {
      count
    }
  }
`

export default graphql(ALL_LINKS_QUERY, {
  name: 'allLinksQuery',
  options: (ownProps) => {
    const { pathname } = ownProps.location
    const page = parseInt(pathname.substring(1, pathname.length))
    return {
      variables: {
        skip: (page - 1) * LINKS_PER_PAGE,
        first: LINKS_PER_PAGE
      },
      fetchPolicy: 'network-only'
    }
  }
}) (LinkList)