这个问题的原因是因为默认的relayStylePagination使用的是Cursor-based pagination,而Cursor-based pagination需要在后端提供相应的cursor值。因此,在使用fetchMore函数时,需要手动传入cursor值。具体的代码示例如下:
import { gql } from '@apollo/client';
import { usePaginationFragment } from 'react-relay/hooks';
const query = gql`
query MyQuery($first: Int!, $after: String) {
myData(first: $first, after: $after) @connection(key: "myData_myConnection") {
edges {
node {
id
text
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`;
const MyComponent = () => {
const { data, loadMore } = usePaginationFragment(query, {
myData: () => null,
});
const handleClick = () => {
loadMore(6, {
after: data.myData.pageInfo.endCursor,
});
};
return (
{/* render data */}
);
};
上面的代码中,在调用loadMore函数时,我们手动传入了after参数,这个参数的值就是上一个数据的endCursor值。这样就可以成功使用fetchMore函数进行数据获取了。