Apollo 客户端 relayStylePagination 不获取更多

Question

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

index.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')
);

App.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()
      },
    },
  },
});

Apollo 客户端 relayStylePagination 不获取更多

Apollo Client relayStylePagination doesn't fetchMore

graphql

apollo-client