在 Angular 应用程序中创建条件 Apollo Client RefetchQueries 参数答案

【问题标题】：Creating conditional Apollo Client RefetchQueries parameter in Angular applications在 Angular 应用程序中创建条件 Apollo Client RefetchQueries 参数
【发布时间】：2022-10-17 20:09:54
【问题描述】：

我有一个组件，当来自应用程序的 3 个不同页面时，该组件需要运行不同的 refetchQuery 和导航。为此，我监听了应用层发布的 appState 数据。我在我的 Angular 应用程序中使用 Apollo Client 包来管理 GraphQL 操作。我尝试使用 Angular 之前自带的路由状态来管理这些操作，但对我来说有点复杂和难以管理。我找到了一个不错的解决方案，并想与您分享。

【问题讨论】：

标签： angular graphql observable client apollo

【解决方案1】：

appState 是在整个应用中发布的应用状态服务。组件之间的重要数据在这里交换。一种可观察的模式。

refetchHandler 方法根据 appState 状态创建一个 refetchQueries 目录，无论来自哪个延迟加载的页面模块。同样，navigateHandler 指向添加位置后要转到的上一个操作页面。

在使用这种结构之前，我使用了Angular的路由状态，坦率地说，我觉得它有点混乱和无用，所以我搜索了这样的解决方案。


refetchHander(appState: AppState): MutationBaseOptions {
    const refetchQueries = [
        {
            query: this.coordinatesTableGQL.document,
            variables: {
                filter: {
                    skip: 0,
                    take: 10,
                },
            },
        },
        {
            query: this.coordinatesCountGQL.document,
            variables: {
                filter: {
                    skip: 0,
                    take: 10,
                },
            },
        },
    ] as any;

    if (appState?.request) {
        refetchQueries?.push({
            query: this.requestDetailGQL.document,
            variables: {
                id: appState.request.id,
            },
        });
    }

    if (appState?.activity) {
        refetchQueries?.push({
            query: this.activityDetailGQL.document,
            variables: {
                id: appState.activity.id,
            },
        });
    }
    return {
        refetchQueries,
    };
}

navigateHandler(appState: AppState): void {
    if(appState.request) {
    this.router.navigate(['requests/detail', appState.request?.id]);
}
if (appState.activity) {
    this.router.navigate(['activity-detail', appState.activity?.id]);
}
this.router.navigate(['coordinates']);
    }

createCoordinate(): void {
    this.isProgress = true;
    let createCoordinateInput: CreateCoordinateInput;
    if(this.appState.activity?.id) {
    createCoordinateInput = {
        ...this.coordinateForm.value,
        activityId: this.appState.activity?.id,
    };
} else {
    createCoordinateInput = this.coordinateForm.value;
}
const options = this.refetchHander(this.appState);
this.createCoordinateSub = this.coordinateService.create(createCoordinateInput, options).subscribe({
    next: createCoordinate => {
        this.isProgress = false;
        this.snackBarService.success(`${createCoordinate.title} coordinate added!`);
        this.appStateService.removeMarkers();
        this.navigateHandler(this.appState);
    },
    error: (error: Error) => {
        this.isProgress = false;
        this.alertBoxService.error({ message: error.message });
    },
});

}

【讨论】：