这个问题可能是因为 fetchMore 方法执行后没有触发 loading 状态更新的原因。您可以通过将 loading 参数设置为 true 来手动更新 loading 状态,同时在 fetchMore 方法中添加部分必要的参数来解决此问题。
以下是示例代码,仅供参考:
import { useLazyQuery } from '@apollo/client';
const MY_QUERY = gql`
query MyQuery($param: String!, $offset: Int!, $limit: Int!) {
myQuery(param: $param, offset: $offset, limit: $limit) {
nodes {
id
name
}
pageInfo {
endCursor
hasNextPage
}
}
}
`;
function MyComponent() {
const [getMyData, { loading, data, fetchMore }] = useLazyQuery(MY_QUERY);
const handleLoadMore = () => {
const { endCursor } = data.myQuery.pageInfo;
fetchMore({
variables: {
param: 'someParam',
limit: 10,
offset: endCursor + 1,
},
updateQuery: (prevData, { fetchMoreResult }) => {
const newData = { ...prevData };
newData.myQuery.nodes = [
...newData.myQuery.nodes,
...fetchMoreResult.myQuery.nodes,
];
newData.myQuery.pageInfo = fetchMoreResult.myQuery.pageInfo;
return newData;
},
});
// 手动更新 loading 状态
getMyData({
variables: { param: 'someParam', offset: endCursor + 1, limit: 10 },
fetchPolicy: 'network-only',
skip: true,
});
};
return (
{loading ? (
Loading...
) : data ? (
<>
{data.myQuery.nodes.map((node) => (
- {node.name}
))}
{data.myQuery.pageInfo.hasNextPage && (
)}
>
) : null}
);
}