Create a service by .graphql with all operations in Angular

[MiguelAngelLV]

Hi!

I use Graphql Code Generator in my Angular project and some components need a few diferents operations (fetch data, update a element, delete, send notification...) so I need import a lot of clients in my component and is very "ugly".

There are any way to create with Code Generator a service by .graphql with all operations?

Fast example:

mycomponent.graphql

query GetData {
   data : getData {
     name
   }
}

mutation UpateData($data: DataInput) {
    updateData(data: $data) {
       name
    }
}

mycomponent.ts

construct( services: MyComponentGQL) {
    
    services.getData.fetch().subscribe( s => {} );
    
    services.updateData.mutate({ data } ).subscribe ( s => { } );

}

[saihaj]

have you tried combining near-operation-file-preset?

[MiguelAngelLV]

Umm... With near-operation-file I get a file by .graphql, but these files have multiples services.

I want a service per .graphql, not a file per .graphql

[saihaj]

You would probably need to create a custom plugin

[MiguelAngelLV]

I create a custom plugin

module.exports = {

  plugin(schema: any, documents: any, config: any) {

    let code = ``

    documents.forEach(doc => {
      let name = createName(doc.location)
      code += `
    @Injectable({
      providedIn: "root"
    })
    export class ${name}Service {
       constructor(
        ${doc.document.definitions.map(d => `  private _${uncapitalize(d.name.value)}: ${d.name.value}GQL`).join(",\n        ")}
       ) {
       }
       \n`;

      code += doc.document.definitions
        .filter(d => d.operation == 'query')
        .map(d => query(d))
        .join("\n")

      code += doc.document.definitions
        .filter(d => d.operation == 'mutation')
        .map(d => mutation(d))
        .join("\n")

      code += "\n}\n";

    });


    return code;
  }

};


function query(definition: any) {
  const name = definition.name.value;
  return `
     ${uncapitalize(name)}(variables: ${definition.name.value}QueryVariables) {
        return this._${uncapitalize(name)}.fetch(variables);
     }`
}


function mutation(definition: any) {
  const name = definition.name.value;
  return `
     ${uncapitalize(name)}(variables: ${definition.name.value}MutationVariables) {
       return this._${uncapitalize(name)}.mutate(variables);
     }`
}

function createName(location: string) {
  const file = location.split("/").pop()!!;
  const basename = file.split(".")[0];
  const words = basename.split("-");
  return words.map(s => capitalize(s)).join("");
}

function capitalize(string: string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

function uncapitalize(string: string) {
  return string.charAt(0).toLowerCase() + string.slice(1)

}