What is preventing Apollo from achieving full transformation?

I have been struggling with an issue involving Apollo mutation for the past 2 days.

Whenever I call a mutation on Angular Apollo generated code and subscribe to it, the subscription never completes. I am expecting a result from the server, but nothing is being returned.

I'm not sure why it's not completing. Interestingly, when I directly call the GraphQL server with a POST request using Postman, I do get the expected result.

 constructor(
    private createAccount: CreateAccountGQL,) {
  }

ngOnInit() {
 this.createAccount.mutate({
      data: {
        uid: 'sdfsdfsdfs',
        username: 'yxydfsdsdsdfsfsfsd',
      },
    }).subscribe(result => {
       // THIS CODE NEVER EXECUTES
       console.log(result)
  });
}

Below is the generated code:

@Injectable({
  providedIn: "root"
})
export class CreateAccountGQL extends Apollo.Mutation<
  CreateAccountMutation,
  CreateAccountVariables
> {
  document: any = gql`
    mutation createAccount($data: AccountCreateInput!) {
      createAccount(data: $data) {
        id
        username
        uid
      }
    }
  `;
}

I am eager to receive some help in ensuring my subscribe complete callback works as intended. Thank you.

Answer №1

I was able to resolve my issue by realizing that the GraphQlModule was not imported in my module.

The first code snippet is functioning as expected.

this.apollo.mutate({
      mutation: gql`mutation createAccount($data: AccountCreateInput!) {
        createAccount(data: $data) {
          id
          username
          uid
        }
      }
    `,
    variables: {
      "data":{
        "uid": "DKpWcH6q2wRCTeUTigrQasdadsVcFfqaS2",
        "username": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e677a786d7a786d787a5e737f7772307d7173">[email protected]</a>"
      }
    },
    }).subscribe(result => console.log(result))

However, the second code snippet is not working. It seems like another module needs to be imported.


this.createAccount.mutate({
      data: {
        uid: 'DKpWcH6q2wRCTeUTigrQasdadsVcFfqaS2',
        username: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acd5c8cadfc8cadfcac8ecc1cdc5c082cfc3c1">[email protected]</a>',
      },
    }).subscribe(result => {
      console.log(result);
    });

Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for updating the same array in TypeScript

I have written a reducer code where I check if the same value is already present in the array. If it is, I update the previous value instead of pushing the same value again. Here is my code snippet: export function reducer( state: IDeviceState = ...

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

Is it possible to draw parallels between Java Callable and Angular Observable (RxJS) in terms of client implementation?

Before anyone considers downvoting or closing my question, I want to clarify that I am not asking which option is better (as this would be an irrelevant question considering one focuses on the server and the other on the browser). In this straightforward ...

Unable to access this context in Firefox debugger after promise is returned

I'm curious as to why the 'this' object is not showing up in the debugger in Firefox, but it does appear in Chrome's debugger. When I try to access 'this.myProperty', it shows as undefined. This is the code from my TypeScript ...

Error: Unable to inject HttpClient dependency. Angular 5

I recently switched to using the Angular template in Visual Studio 2017 and decided to update to Angular 5.2. However, I encountered an error while trying to make a http call from the service class. The error message I received is: https://i.sstatic.net/p ...

Is there a substitute for useState in a Next.js server component?

With my static site at , the only interactive feature being the dark mode toggle, I understand that using useState is not feasible in a server component. export default function RootLayout({ children }: { children: React.ReactNode }) { const [darkMode, ...

Using POST parameters with HTTP Client in Angular 2

I have been working on converting my jQuery code into Angular2. While the jQuery code is functioning correctly, the Angular2 code seems to be producing a different output from the API. I have already compared the parameters and endpoint using firebug/cons ...

Add a class individually for each element when the mouse enters the event

How can I apply the (.fill) class to each child element when hovering over them individually? I tried writing this code in TypeScript and added a mouseenter event, but upon opening the file, the .fill class is already applied to all elements. Why is this ...

Uncovering the enum object value by passing a key in typescript/javascript

How can I retrieve the value of an enum object by passing the key in typescript? The switch case method works, but what if the enum object is too long? Is there a better way to achieve this? export enum AllGroup = { 'GROUP_AUS': 'A' &a ...

Angular: Displaying data in a list format from a multidimensional array

My data structure is as follows: { 'TeamLeader': 'Andrew', 'subordinates': [{ 'Name': 'Daniel', 'subordinates': [{ 'Name': 'Stev ...

Angular project models

I'm exploring the Core/Shared/Feature design pattern for building large, scalable applications in Angular, and I find myself unsure about where models fit in. Is there a consensus on which module they belong in? I came across a post suggesting that ...

Retrieve route parameters in Angular 6 without using promises

I am currently utilizing Angular 6. When working with route parameters, I typically use the following code snippet: this.route.params.subscribe(params => { // params can now be utilized as an object variable }); However, I find myself needing to a ...

Having trouble getting the Bootstrap 5 Modal to function properly within an Electron app

Facing an issue with my web app using Bootstrap 5, as the modal is not displaying properly. Below is the HTML code for the modal and the button that triggers it: <div class="modal" tabindex="-1" id=&quo ...

Functionality not functioning within Shadow DOM

After creating and exporting an Angular Element as a single script tag (user-poll.js), using the element on a host site is simple. Just include the following two lines: <user-poll></user-poll> <script src="path/to/user-poll.js"></sc ...

Using `useState` within a `while` loop can result in

I'm working on creating a Blackjack game using React. In the game, a bot starts with 2 cards. When the user stands and the bot's card value is less than 17, it should draw an additional card. However, this leads to an infinite loop in my code: ...

The development mode of NextJS is experiencing issues, however, the build and start commands are functioning normally

Just finished creating a brand new Next app (version: 12.0.7) using Typescript and Storybook. Everything seems to be working fine - I can successfully build and start the server. However, when I try to run dev mode and make a request, I encounter the follo ...

What causes multiple links to have an active class when using Angular2's routerLinkActive?

I am currently trying to incorporate routerLinkActive into my application, but I am encountering an issue where the active class is being applied to multiple links. Here's how I have implemented it: <ul class="nav nav-tabs"> <li r ...

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

Angular's Validator directive offers powerful validation capabilities for reactive forms

Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...

What causes an Angular Form to be validated before I even click the Submit button?

I have a Dynamic Angular Form. Upon loading the page, the form undergoes validation for errors. My goal is to implement a scroll-to-error directive that can automatically scroll and focus on the error div. However, I am facing an issue where the form is a ...