angular useFactory 在模块

问题描述

我想弄清楚如何在 Angular 11 中使用 useFactory 作为异步函数。现在我有这个：

import { ApolloClientOptions } from 'apollo-client';
import { FirebaseService } from './firebase.service';
// other imports here...

export async function createApollo(httpLink: HttpLink,fs: FirebaseService): Promise<ApolloClientOptions<any>> {

  const token = await fs.getToken();

  const getHeaders = async () => {
    return {
      "X-Auth-Token": token,};
  };

  // functions has more content here...

  return Promise.resolve({
    link: errorLink.concat(link),cache: new InMemoryCache(),});
}

@NgModule({
  imports: [HttpLinkModule],providers: [
    {
      provide: APOLLO_OPTIONS,useFactory: createApollo,deps: [HttpLink,FirebaseService],},],})
export class DgraphModule { }

问题是它解决了异步函数，但不是在返回之前。我在 StackOverFlow 上看到了一些其他帖子来解决这个问题，但他们最终遗漏了函数的 async 部分。你不能有一个不在异步函数中的等待，所以我在这里忘记了。

如果该函数不是异步函数，您也不能将异步函数放入异步函数中……那我在这里做什么？

更新：2/11/21 - 根据 this 的说法，有一种方法可以用 PlatformBrowserDynamic() 做到这一点，但我不明白如何在我的模块。

更新：2/13/21 这是 codeandbox.io 的链接 - 忽略缺少 html 或工作端点，但您可以查看模块并将其更改为 {{ 1}} 函数以查看是否存在 Invariant Violation 错误。 ---> 确保查看 codeandsandbox 控制台以查找错误。

解决方法

您不能在不支持的依赖项注入中使用异步工厂函数。有一个内置功能可以帮助您解决此问题，称为应用程序初始化程序。您可以使用内置的 APP_INITIALIZER 令牌在依赖项注入中注册应用程序初始值设定项。此令牌需要一个工厂，该工厂将返回一个将作为应用程序初始化程序调用的函数，并且它可以返回一个承诺。此应用程序初始化程序在应用程序开始时被调用，并且应用程序直到全部完成才会启动。对于您的情况，我认为这是可以的，因为您阅读了某种配置。不幸的是，我所知道的没有关于此的良好官方文档。如果您搜索，您会找到一些关于此主题的文章。这是另一个 stack overflow question that explains it 的链接。 要在您的情况下使用这种方法，我认为最好创建一个执行初始化然后保存值的服务。

@Injectable()
export class ApolloOptionsService {
  public apolloOptions: any;

  constructor(private httpLink: HttpLink) {}

  public createApollo() {
    const token = "";

    const getHeaders = async () => {
      return {
        "X-Auth-Token": token
      };
    };

    const http = ApolloLink.from([
      setContext(async () => {
        return {
          headers: await getHeaders()
        };
      }),this.httpLink.create({
        uri: `https://${endpoint}`
      })
    ]);

    // Create a WebSocket link:
    const ws = new WebSocketLink({
      uri: `wss://${endpoint}`,options: {
        reconnect: true,connectionParams: async () => {
          return await getHeaders();
        }
      }
    });

    const link = split(
      // split based on operation type
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
      },ws,http
    );
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          link: link,cache: new InMemoryCache()
        });
      },5000);
    }).then((apoloOptions) => (this.apolloOptions = apoloOptions));
  }
}

如您所见，我还在承诺中添加了延迟以模拟它稍后完成。 现在让我们也更改您的模块以使用应用初始化程序。

export function createApollo(apolloOptionsService: ApolloOptionsService) {
  return () => apolloOptionsService.createApollo();
}

export function getApolloOptions(apolloOptionsService: ApolloOptionsService) {
  return apolloOptionsService.apolloOptions;
}

@NgModule({
  imports: [HttpLinkModule],providers: [
    ApolloOptionsService,{
      provide: APP_INITIALIZER,useFactory: createApollo,deps: [ApolloOptionsService],multi: true
    },{
      provide: APOLLO_OPTIONS,useFactory: getApolloOptions,deps: [ApolloOptionsService]
    }
  ]
})
export class GraphQLModule {}

如您所见，我们使用一个工厂函数来创建应用初始化函数，该函数在应用程序初始化时调用。需要另一个工厂函数从服务读取初始化值并将其作为 APOLLO_OPTIONS 令牌提供。因为初始化程序在应用程序启动之前运行，所以值在使用之前就准备好了。

我还创建了一个 fork of your codesandbox，您可以在其中看到它的实际效果。