Блог

Начинающий здесь. При использовании одной конечной точки с использованием структуры по умолчанию, созданной при выполнении «ng add apollo-angular», работает нормально, при добавлении второй с использованием APOLLO_NAMED_OPTIONS я получаю два загадочных сообщения об ошибках. Что может быть не так?

Это мой файл graphql.module.ts

 import {APOLLO_OPTIONS, APOLLO_NAMED_OPTIONS} from 'apollo-angular';
import { InMemoryCache, ApolloLink } from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';

const urium = 'https://some.url.here';       //changed for this post
const urips = 'https://some.other.one.here'; //changed for this post


export function createApollo(httpLink: HttpLink) {
  return {
    link: ApolloLink.from([httpLink.create({ uri: urium })]),
    cache: new InMemoryCache()
  }
}


export function createProjectspecApollo(httpLink: HttpLink) {
  return {
    name:'projectspec',
    link: ApolloLink.from([httpLink.create({ uri: urips })]),
    cache: new InMemoryCache()
  }
}

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink]
    },{
      provide: APOLLO_NAMED_OPTIONS,
      useFactory: createProjectspecApollo,
      deps: [HttpLink]
    }
  ]
})
export class GraphQLModule {}
 

Вот GqlApolloInterfaceService, где я использую клиент

 import { Apollo } from "apollo-angular";



@Injectable({
  providedIn: 'root'
})
export class GqlApolloInterfaceService {
 
  constructor(private apollo:Apollo) { }
  
}
 

Наконец, мой package.json

 {
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/cdk": "^11.0.1",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.0.0",
    "@angular/material": "^11.0.1",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@apollo/client": "^3.0.0",
    "apollo-angular": "^2.1.0",
    "apollo-angular-link-http": "^1.11.0",
    "apollo-link-context": "^1.0.20",
    "graphql": "^15.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.1",
    "@angular/cli": "~11.0.1",
    "@angular/compiler-cli": "~11.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}
 

Я получаю две ошибки: первая отображается только первой, как только я добавляю второй pbject в список поставщиков:

ОШИБКА Ошибка: неперехваченный (в обещании): Инвариантное нарушение: Для инициализации клиента Apollo необходимо указать свойство ‘cache’ в объекте options.

Затем, если я обновлю страницу, я получу другую:

ОШИБКА Ошибка: не перехвачено (в обещании): Ошибка: NG0200: циклическая зависимость в DI обнаружена для GqlApolloInterfaceService Ошибка: NG0200: циклическая зависимость в DI обнаружена для GqlApolloInterfaceService

Я только начинаю с клиента Apollo, поэтому это может быть что-то чрезвычайно простое, однако у меня создается впечатление, что документация очень расплывчата, и для ее создания было приложено не так много усилий. Что может происходить и, самое главное, как я могу заставить это работать?

С уважением!

Попробуйте именованный клиент Apollo

 apollo.create(option1, "endpoint 1")

apollo.create(option2, "endpoint 2")

apollo.use('endpoint 1').watchQuery({...});
 

см. https://apollo-angular.com/docs/recipes/multiple-clients /

Альтернатива, просто для размышления

Вместо настройки нескольких конечных точек graphql в пользовательском интерфейсе используйте федерацию Apollo с сервером Apollo для настройки нескольких graphql, таким образом, пользовательский интерфейс будет иметь только один клиент Apollo. Любые новые изменения api / graphql происходят только на сервере Apollo. Нет необходимости изменять пользовательский интерфейс https://www.apollographql.com/docs/federation/gateway /

Я решил это с помощью функции uri() в атрибуте ссылки из возвращаемого объекта createApollo. В моем случае некоторые запросы / мутации должны были выполняться для одной конечной точки, а другие — для другой конечной точки. Все мои запросы / мутации реализованы в виде сервисов, как показано здесь

Сначала я создал функцию operationFilter, которая действует как фильтр, проверяя имя операции. Затем функция uri использует operationFilter для выбора между двумя разными конечными точками

Мой новый graphql.module.ts выглядит так

 import {NgModule} from '@angular/core';
import {APOLLO_OPTIONS } from 'apollo-angular';
import { InMemoryCache, ApolloLink } from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { setContext } from '@apollo/client/link/context';

const urium = 'https://some.url.here';       //changed for this post
const urips = 'https://some.other.one.here'; //changed for this post


function operationFilter(operationName:string):boolean{  
  if(...) return true;    //queries that should go to one endpoint
  else return false;      //and the others
 }

export function createApollo(httpLink: HttpLink) {

    const auth = setContext((operation, context) => {
        ...add some header stuff, like jwt...
    });

   return {
       link: ApolloLink.from(
           [
               auth, 
               httpLink.create({
                   uri(operation){ 
                       return operationFilter(operation.operationName)? urium : urips;
                   } 
               })
           ]),
       cache: new InMemoryCache(),
       defaultOptions:{query:{errorPolicy: "all"}}
    } 
}
 

Более подробную информацию можно найти здесь

Я думаю, это не самое сложное решение, но оно сработало. Я буду рад узнать, есть ли более чистый способ сделать это.

С уважением!