Учебное руководство по Angular Graphql Codegen [закрыто]

Вопрос или проблема

import { Injectable } from '@angular/core';
import { signInMutationService } from '../../../graphql/generated';

@Injectable({
  providedIn: 'root',
})
export class LoginService {
  //private readonly JWT_TOKEN = 'JWT_TOKEN';
  //private loggedUser?: string;
  //private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
  private signInGQL: signInMutationService

  signIn(login: string, password: string) {

    this.signInGQL.mutate({
      authInput: {
        login,
        password
      }
    }).subscribe(({ data, errors, loading }) => {
      if (errors) {
        console.error('Ошибка при подключении', errors);
      }
      if (data) {
        console.log('Полученные данные', JSON.stringify(data, null, 2));
      }
    })
  }

}

ERROR TypeError: Невозможно прочитать свойства неопределенного (чтение 'mutate')
    в _LoginService.signIn (login.service.ts:15:20)
    в _LoginComponent.onSubmit (login.component.ts:37:23)
    в LoginComponent_Template_button_click_30_listener (login.component.html:86:22)
    в executeListenerWithErrorHandling (core.mjs:24697:16)
    в wrapListenerIn_markDirtyAndPreventDefault (core.mjs:24730:22)
    в HTMLButtonElement.<anonymous> (platform-browser.mjs:749:112)
    в _ZoneDelegate.invokeTask (zone.js:402:31)
    в core.mjs:14452:55)
    в AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:14452:36)
    в _ZoneDelegate.invokeTask (zone.js:401:60)

Ответ или решение

Учитывая вашу проблему с использованием GraphQL Codegen в Angular, давайте разберем ваш код и найдем решение. Судя по предоставленному коду и описанным ошибкам, существует несколько моментов, которые требуют уточнения.

Проблема

Ошибка, с которой вы столкнулись:

ERROR TypeError: Cannot read properties of undefined (reading 'mutate')

указывает на то, что ваш объект signInGQL не инициализирован. Вероятно, вы не внедрили сервис GraphQL должным образом.

Решение

1. Убедитесь, что вы корректно импортируете и используете сгенерированный сервис. Проверьте, что ваш signInMutationService импортируется правильно и что вы создаете экземпляр этого сервиса через зависимость Angular.

2. Используйте Angular Dependency Injection для инициализации GraphQL сервиса. Для этого вы должны добавить signInGQL через конструктор. На примере это может выглядеть так:

import { Injectable } from '@angular/core';
import { signInMutationService } from '../../../graphql/generated';
import { Apollo } from 'apollo-angular'; // Убедитесь, что вы импортируете Apollo!
import { SignInGQL } from '../../../graphql/generated'; // Ваш сгенерированный класс

@Injectable({
  providedIn: 'root',
})
export class LoginService {
  constructor(private signInGQL: SignInGQL) {}

  signIn(login: string, password: string) {
    this.signInGQL.mutate({
      authInput: {
        login,
        password
      }
    }).subscribe(({ data, errors, loading }) => {
      if (errors) {
        console.error('Error getting connection', errors);
      }
      if (data) {
        console.log('Data retrieved', JSON.stringify(data, null, 2));
      }
    });
  }
}

3. Проверьте, что вы правильно настроили Apollo Client. Убедитесь, что ваш Apollo Client и его настройки корректны, и что вы добавили его в список провайдеров, если это необходимо.

4. Взаимодействие с компонентом. Убедитесь, что ваш компонент корректно вызывает метод signIn из LoginService. Например:

import { Component } from '@angular/core';
import { LoginService } from './login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})
export class LoginComponent {
  constructor(private loginService: LoginService) {}

  onSubmit(login: string, password: string) {
    this.loginService.signIn(login, password);
  }
}

Заключение

Таким образом, ключевыми моментами для решения вашей проблемы являются правильная инициализация и использование вашего signInGQL через Angular Dependency Injection. После выполнения этих шагов ваша ошибка должна быть исправлена, и сервис авторизации должен начать работать как ожидается.

Если у вас есть дополнительные вопросы или вам нужны более подробные объяснения по какому-либо из этапов, не стесняйтесь спрашивать. Удачи в разработке!