刷新特定GraphQL可获取查询的问题

Question

我对React和GraphQL(Apollo(以及学习堆栈非常陌生。

我有一个React组件，它加载一些页面数据，页面上有一个"重新加载"按钮。

问题：

• 我想在单击"重新加载"按钮时重新写入数据
• 但是，我找不到从queryObservable中重新获取数据的方法
• 如何从QueryObservable中重新获取数据？有什么可以打电话给refetch吗

我尝试使用reFetchObservableQueries()，但是，这会重新加载页面并引用所有内容。我能具体地只重新绘制一个可观察到的吗？

这是我的代码：

getPageQueryObservable = (contentId, key, paginated = false) => {
const query = contentId ? TreeQuery : RootLevelQuery;
const defaultVariables = 'Test';
const variablesForPagination = {
paginationLimit: INITIAL_PAGE_SIZE,
...defaultVariables
};
return this.props.apolloClient.watchQuery({
query,
variables: paginated === true ? variablesForPagination : defaultVariables
});
};
loadPages = async (paginated = false) => {
const { pages: localPages } = this.state;
const { id, key } = this.props;
const queryObservable = this.getPageQueryObservable(
id,
key,
paginated
);

// I want to ideally call this stuff again..When "Reload" button is clicked.
this.querySubscription = queryObservable.subscribe({
next: ({ data, loading }) => {
....
});

Answer 1

您可以使用相同的查询和变量调用query，但调用network-only的fetchPolicy，以便重新查询。这应该会更新缓存，从而更新任何相关的Observable。

await client.query({ query, variables, fetchPolicy: 'network-only' })

但是，确实没有理由直接使用watchQuery。相反，您应该使用hook API来获取和refetch数据。

const { data, loading, refetch } = useQuery(query, { variables })

这不仅减少了样板，而且现在重新蚀刻就像一样简单

await refetch()