Apollo 客户端relayStylePagination 无法获取更多

Question

relayStylePagination()我已经根据apollo文档（https://www.apollographql.com/docs/react/pagination/cursor-based/#relay-style-cursor-pagination）通过以下方式实现：

索引.js：

const httpLink=new HttpLink({
  uri:'https://api.github.com/graphql',
  headers:{
    authorization: 'Bearer -'
  }
})

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        repositories:relayStylePagination()
      },
    },
  },
});

const client=new ApolloClient({
  link:httpLink,
  cache
})

ReactDOM.render(
  <ApolloProvider client={client}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </ApolloProvider>,
  document.getElementById('root')
);

应用程序.js：

const  App=()=> {

  const {loading,error,data,fetchMore}=useQuery(GET_REPOSITORIES_OF_CURRENT_USER,{
    variables:{login:"rwieruch"}
  })

  if (loading) return <h1>Loading...</h1>
  if (error) return <p>Error...</p>
  console.log(data.user.repositories.edges)
  console.log(data)

  const pageInfo=data.user.repositories.pageInfo
  console.log(pageInfo)
  return(
    <div>
      <RepositoryList repositories={data.user.repositories} onLoadMore={()=>
           {return fetchMore({
              variables:{
                after: data.user.repositories.pageInfo.endCursor,
              }
            })}
       }
      />
    </div>
  )
}

按钮在子组件中的呈现方式：

<button onClick={onLoadMore}>Hey</button>

最后是 gql 查询：

const GET_REPOSITORIES_OF_CURRENT_USER = gql`
  query getUser($login:String!,$after:String){
  user (login:$login){
    repositories(
      first: 10,
      after:$after
    ) {
      edges {
        node {
          id
          name
          url
          descriptionHTML
          primaryLanguage {
            name
          }
          owner {
            login
            url
          }
          stargazers {
            totalCount
          }
          viewerHasStarred
          watchers {
            totalCount
          }
          viewerSubscription
        }
      }
        pageInfo{
          endCursor
          hasNextPage
      }
    }
  }
}
`;

问题是，当我按下与 fetchMore 对应的 onClick 属性的按钮时，没有获取任何内容。另外，我的控制台中没有错误 - 它只是不执行任何操作。你能告诉我为什么吗？我已经尝试了几个小时来解决这个问题。谢谢你！

Answer 1

您的类型策略指定字段的分页Query.repositories。但您正在对该User.repositories字段进行分页。

尝试改成这样：

const cache = new InMemoryCache({
  typePolicies: {
    User: { // <- (!)
      fields: {
        repositories:relayStylePagination()
      },
    },
  },
});