Angular code generation for v6 amplify

[qwe12e]

Before opening, please confirm:

• I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

v18.12.1

Amplify CLI Version

12.10.1

What operating system are you using?

Mac

Amplify Codegen Command

codegen types

Describe the bug

I'm following the tutorials in here amplify. I'm trying to generate api.service.ts using amplify codegen types. But this package is creating older version of amplify what I mean is that it is trying to import

import API, { graphqlOperation, GraphQLResult } from "@aws-amplify/api-graphql";
import { Observable } from "zen-observable-ts";

but it should do something like this:

import { generateClient } from 'aws-amplify/api';
import * as mutations from './graphql/mutations';

const client = generateClient();

const updatedTodo = await client.graphql({
  query: mutations.updateTodo,
  variables: { input: {} }
});

Expected behavior

it should create the new way of sending requests in the service.

Reproduction steps

run amplify codegen types

GraphQL schema(s)

# Put schemas below this line

Log output

# Put your logs below this line

Additional information

No response

[jkeczan]

I am seeing the same. I am upgrading to V6

[mohammedsahl]

Likewise. Also upgrading to v6. We're pretty dependant on codegen. Doing this manually would be some work 😰

[hisham]

+1. Is this going to be done anytime soon? Seems like it should be high priority, but I see it's not even assigned to anybody at this point.

[david-mcafee]

@qwe12e - thank you for filing this issue! We are currently investigating a fix, and will provide an update when we have more information.

[qwe12e]

If anyone interested for a quick fix in my project I did this:

import { Injectable } from '@angular/core';
import { GraphQLResult } from '@aws-amplify/api-graphql';
import { Observable } from 'rxjs';
import { generateClient } from 'aws-amplify/api';
const client = generateClient();
const graphqlOperation = (statement: string, args = {}) => {
  return {
    query: statement,
    variables: args,
  };
};

const API = {
  graphql: ({ query, variables = {} }: { query: string; variables: Object }) => {
    return client.graphql({ query, variables });
  },
};

if you write post before your script it means that it will run after that script so in this case

I'm calling npm run codegen after this finishes npm will automatically run the postcodegen script.

In this script I just do find and replace

const path = require('path');
const replace = require('replace-in-file');

// path to the GQL Service
const servicePath = path.resolve(__dirname, '..', 'src', 'app', 'services', 'gql.service.ts');

async function replaceFile() {
  try {
    // add the custom API and graphqlOperation
    await replace({
      files: servicePath,
      from: /api-graphql';/,
      to: `api-graphql';
    import { Observable } from 'rxjs';
    import { generateClient } from 'aws-amplify/api';
    const client = generateClient();
    const graphqlOperation = (statement: string, args = {}) => {
      return {
        query: statement,
        variables: args,
      };
    };

    const API = {
      graphql: ({ query, variables = {} }: { query: string; variables: Object }) => {
        return client.graphql({ query, variables });
      },
    };
      `,
    });
  } catch (error) {
      console.error('Error occurred:', error);
    }
 }

replaceFile();

this way I don't need to worry about the generated methods. It will use the newer functions