带有 graphql 和 apollo 的 ANGULAR SSR，transferState 不会传输到客户端答案

【问题标题】：ANGULAR SSR with graphql and apollo, transferState doesn't transfer to client side带有 graphql 和 apollo 的 ANGULAR SSR，transferState 不会传输到客户端
【发布时间】：2023-02-20 13:40:06
【问题描述】：

我有一个角度应用程序，它在第一页上显示文章。我不希望 api 调用被执行两次，第一次在服务器端，一次在客户端，所以我使用传输状态来检查 api 是否已经被调用。如果我使用 REST API，一切正常，api 调用仅在服务器上执行，但是当我使用 apollo 添加 graphql 时，这似乎不起作用。

async ngOnInit() {
let myTransferStateKey = makeStateKey<any>('myDatas');

if (this.transferState.hasKey(myTransferStateKey)) {
  console.log('HomeComponent ngOnInit hasKey');
  this.transferState.get(myTransferStateKey, [])
  this.transferState.remove(myTransferStateKey);
} else {
  console.log('HomeComponent ngOnInit noKey');
  
  this.posts = (await this.graphql.query(this.home_query)) as {
    capital: string
    currency: string
    languages: []
    name: string
    native: string
  }[] 

  this.transferState.set(myTransferStateKey, this.posts) 
  
}

}

【问题讨论】：

标签： javascript angular graphql server-side-rendering angular-ssr

【解决方案1】：

如果您使用 Apollo，请考虑使用他们的 docs 中使用的方法。请记住在配置中添加 ssrMode 和 ssrForceFetchDelay 以使其正常工作。正确设置 API 服务器 url 也很重要，正如他们在最佳实践中提到的那样。样本：

import { APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { HttpClientModule } from '@angular/common/http';
import { InjectionToken, NgModule } from '@angular/core';
import { BrowserModule, makeStateKey, TransferState } from '@angular/platform-browser';
import { InMemoryCache } from '@apollo/client/core';
 
const APOLLO_CACHE = new InjectionToken<InMemoryCache>('apollo-cache');
const STATE_KEY = makeStateKey<any>('apollo.state');
 
@NgModule({
  imports: [
    // ...
    BrowserModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide: APOLLO_CACHE,
      useValue: new InMemoryCache(),
    },
    {
      provide: APOLLO_OPTIONS,
      useFactory(httpLink: HttpLink, cache: InMemoryCache, transferState: TransferState) {
        const isBrowser = transferState.hasKey<any>(STATE_KEY);
 
        if (isBrowser) {
          const state = transferState.get<any>(STATE_KEY, null);
          cache.restore(state);
        } else {
          transferState.onSerialize(STATE_KEY, () => {
            return cache.extract();
          });
          // Reset cache after extraction to avoid sharing between requests
          cache.reset();
        }

        return {
          link: httpLink.create({ '/graphql', withCredentials: true }),
          cache,
          ssrMode: true,
          ssrForceFetchDelay: 100,
        };
      },
      deps: [HttpLink, APOLLO_CACHE, TransferState],
    },
  ],
  // ...
})
class AppModule {}

【讨论】：