要使用Angular Apollo GraphQL的watchQuery和subscription,需要按照以下步骤进行设置:
安装必要的包:
npm install apollo-angular apollo-angular-link-http apollo-angular-link-ws apollo-client apollo-link apollo-link-context apollo-link-error apollo-link-http apollo-link-ws graphql graphql-tag subscriptions-transport-ws
在app.module.ts中设置ApolloClient和链接:
import { NgModule } from '@angular/core';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { ApolloLink, split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
@NgModule({
imports: [
ApolloModule,
HttpLinkModule
]
})
export class AppModule {
constructor(
apollo: Apollo,
httpLink: HttpLink
) {
const httpLinkUri = 'http://localhost:4000/graphql'; // GraphQL HTTP链接地址
const wsLinkUri = 'ws://localhost:4000/graphql'; // GraphQL WebSocket链接地址
const httpLinkHandler = httpLink.create({ uri: httpLinkUri });
const wsLink = new WebSocketLink({
uri: wsLinkUri,
options: {
reconnect: true
}
});
const link = split(
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
httpLinkHandler
);
apollo.create({
link: ApolloLink.from([link]),
cache: new InMemoryCache()
});
}
}
创建一个GraphQL服务,并在其中定义watchQuery和subscription:
import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class GraphqlService {
constructor(
private apollo: Apollo
) { }
// watchQuery示例
getPosts(): Observable {
return this.apollo.watchQuery({
query: gql`
query {
posts {
id
title
}
}
`
}).valueChanges.pipe(
map(result => result.data.posts)
);
}
// subscription示例
subscribeToNewPosts(): Observable {
return this.apollo.subscribe({
query: gql`
subscription {
newPost {
id
title
}
}
`
}).pipe(
map(result => result.data.newPost)
);
}
}
在组件中使用GraphQL服务:
import { Component, OnInit } from '@angular/core';
import { GraphqlService } from './graphql.service';
@Component({
selector: 'app-root',
template: `
{{ post.title }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
posts$: Observable;
constructor(
private graphqlService: GraphqlService
) { }
ngOnInit() {
// 使用watchQuery
this.posts$ = this.graphqlService.getPosts();
// 使用subscription
this.graphqlService.subscribeToNewPosts().subscribe(newPost => {
console.log('New post:', newPost);
});
}
}
这样,你就可以在Angular应用中使用Angular Apollo GraphQL的watchQuery和subscription了。根据你的需求,可以更改GraphQL查询和订阅的定义,并在组件中进行处理。