NativeScript Angular项目中apollo-angular无ApolloModule导出问题求助

Hey，我之前也碰到过这个问题！你找不到ApolloModule是因为apollo-angular从v3版本开始就移除了这个导出成员，改用了更简洁的依赖注入方式来配置Apollo客户端。下面我给你一步步捋清楚怎么在NativeScript Angular项目里搞定GraphQL连接：

1. 先把依赖装对 #

首先确保你装的是最新版的相关包，打开终端跑这个命令：

npm install apollo-angular @apollo/client graphql

如果需要处理异步操作（比如mutation后的副作用），可以额外装个@ngrx/effects，不是必需的，看你需求。

2. 配置Apollo客户端（关键步骤） #

别再找ApolloModule啦，现在我们用provideApollo函数来配置客户端。打开你的app.module.ts，按下面的步骤改：

第一步：导入必要的模块和函数 #

import { NgModule } from "@angular/core";
import { NativeScriptModule } from "@nativescript/angular";
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { provideApollo } from 'apollo-angular';
import { HttpClientModule } from '@angular/common/http'; // 这个必须加，NativeScript Angular的网络模块

第二步：写客户端配置函数 #

这个函数用来指定你的GraphQL服务器地址和缓存配置：

export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
  // 把这里的URL换成你自己的GraphQL服务器地址哦
  const graphqlLink = httpLink.create({ uri: 'https://your-graphql-server.com/graphql' });

  // 用InMemoryCache来缓存查询结果，提升性能
  const cache = new InMemoryCache();

  return {
    link: graphqlLink,
    cache,
  };
}

第三步：在模块里注入配置 #

把provideApollo加到@NgModule的providers数组里，同时别忘了导入HttpClientModule：

@NgModule({
  imports: [
    NativeScriptModule,
    HttpClientModule, // 重要！没有这个Apollo连不上网络
    // 其他你项目里的模块比如AppRoutingModule之类的
  ],
  providers: [
    provideApollo(createApollo), // 这就是替代ApolloModule的配置方式
    // 你的其他服务
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. 测试一下能不能用 #

配置好之后，你可以随便找个组件写个查询试试，比如在home.component.ts里：

import { Component, OnInit } from "@angular/core";
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

@Component({
  selector: "Home",
  templateUrl: "./home.component.html",
})
export class HomeComponent implements OnInit {
  constructor(private apollo: Apollo) {}

  ngOnInit(): void {
    // 写个简单的查询，替换成你服务器支持的查询语句
    this.apollo.query({
      query: gql`
        query GetPosts {
          posts {
            id
            title
          }
        }
      `
    }).subscribe(result => {
      console.log('拿到数据啦:', result.data);
    }, error => {
      console.error('哎呀出错了:', error);
    });
  }
}

几个要注意的小细节 #

• 网络权限：别忘了给你的NativeApp开网络权限！Android要在AndroidManifest.xml里加<uses-permission android:name="android.permission.INTERNET" />，iOS要在Info.plist里配置App Transport Security（如果用http的话）。
• 服务器地址：如果是本地测试，别用localhost，要用你电脑的实际IP地址，不然设备连不上。
• 版本兼容：如果你的NativeScript Angular版本比较老，可能要对应降低apollo-angular的版本，不过尽量用最新稳定版比较好。

内容的提问来源于stack exchange，提问作者Atiq Ur Rehman