要订阅来自AppSync客户端的GraphQL变更,可以使用AWS Amplify提供的Angular库。下面是一个包含代码示例的解决方法:
npm install aws-amplify aws-amplify-angular graphql @aws-amplify/pubsub rxjs
在项目的根目录中创建一个名为aws-exports.js
的文件,并添加以下内容(根据你的AppSync环境进行相应的替换):
const awsmobile = {
"aws_project_region": "YOUR_AWS_PROJECT_REGION",
"aws_appsync_graphqlEndpoint": "YOUR_APPSYNC_GRAPHQL_ENDPOINT",
"aws_appsync_region": "YOUR_APPSYNC_REGION",
"aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "YOUR_APPSYNC_API_KEY"
};
export default awsmobile;
app.module.ts
中配置AWS Amplify:import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
在项目中创建一个名为graphql.service.ts
的文件,并添加以下内容:
import { Injectable } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class GraphqlService {
constructor(private amplifyService: AmplifyService) {}
subscribeToGraphQLChanges(query: any, variables: any): Observable {
const observable = this.amplifyService.api().graphql(
{
query: query,
variables: variables
},
null,
null,
null
);
return new Observable(observer => {
observable.subscribe({
next: data => {
observer.next(data);
},
error: error => {
observer.error(error);
}
});
});
}
}
在你想要订阅GraphQL变更的组件中,导入GraphqlService
并使用它来订阅GraphQL变更。以下是一个示例:
import { Component, OnInit } from '@angular/core';
import { GraphqlService } from './graphql.service';
@Component({
selector: 'app-root',
template: `
{{ data }}
`
})
export class AppComponent implements OnInit {
data$: Observable;
constructor(private graphqlService: GraphqlService) {}
ngOnInit() {
const query = `
subscription MySubscription {
// 这里写你的GraphQL订阅查询
}
`;
const variables = {
// 这里写你的GraphQL订阅变量
};
this.data$ = this.graphqlService.subscribeToGraphQLChanges(query, variables);
}
}
在上面的示例中,AppComponent
订阅了一个GraphQL变更,并将返回的数据绑定到模板中。
这样,你就可以在Angular项目中订阅来自AppSync客户端的GraphQL变更了。记得替换aws-exports.js
中的配置为你自己的AppSync环境。