我在现代继电器中有这个分页:
const CategoryContent = () => {
const { categoryQuery } = useRoute<CategoryContentScreenRouteProp>().params;
const { viewer } = useLazyLoadQuery<CategoryContentQuery>(
graphql`
query CategoryContentQuery(
$count: Int
$cursor: String
$category: String
) {
viewer {
...InfiniteCategories_viewer
@arguments(count: $count, cursor: $cursor, category: $category)
}
}
`,
{ count: 7, category: categoryQuery }
);
//console.log("CategoryContent viewer", viewer);
return (
<Suspense fallback={<LoadingView />}>
<View>
<Text>CategoryContent</Text>
</View>
<InfiniteCategories viewer={viewer} />
</Suspense>
);
};
这是无限的分页:
const InfiniteCategories = ({
viewer,
}: {
viewer: InfiniteCategories_viewer$key;
}) => {
const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment<
InfiniteCategoriesPaginationQuery,
any
>(
graphql`
fragment InfiniteCategories_viewer on Viewer
@argumentDefinitions(
count: { type: "Int", defaultValue: 7 }
cursor: { type: "String", defaultValue: null }
category: { type: "String" }
)
@refetchable(queryName: "InfiniteCategoriesPaginationQuery") {
merchants(first: $count, after: $cursor, category: $category)
@connection(key: "InfiniteCategories_viewer_merchants") {
pageInfo {
startCursor
endCursor
}
edges {
node {
id
category
logo
createdAt
isFavorite
pk
name
}
}
}
}
`,
viewer
);
console.log("data InfiniteCategories", data);
return (
<StyledFlatList
{...{
data:
data && data.merchants && data.merchants.edges
? data.merchants.edges
: [],
contentContainerStyle: styles.contentContainerStyle,
showsVerticalScrollIndicator: false,
keyExtractor: ({ cursor }) => cursor,
renderItem: ({ item }) => (
<View>
<Text>{item.node.name}</Text>
</View>
),
ListFooterComponent: () => {
if (isLoadingNext) return <ActivityIndicator />;
if (hasNext)
return (
<LoadMoreButton
onPress={() => {
loadNext(7);
}}
/>
);
return null;
},
}}
/>
);
};
但是我的问题出在每次渲染中,就像我回到屏幕时一样,它又被加载了?我怎么能阻止它发生,因为它是分页的,用户必须再次加载更多才能重新获得它的数据,我不希望这样?