What is the best work flow for pure front-end typescript?

[UchihaYuki]

I packed my typescript with webpack and send it to users' browser. My current workflow is as follows:

1. put my query in api.gql

query hello {
  helloWorld
}

2. use codegen to generate api.ts

overwrite: true
generates:
    src/ts/graphql/api.ts:
        schema: "http://localhost:6002/api"
        documents: "./src/ts/graphql/api.gql"
        plugins:
            - "typescript"
            - "typescript-operations"

The problem is I don't know how to use api.ts, from the official doc, I have to mix my gql into ts files to make it work, but I'd like to seperate my gql in api.gql.

Thank you, guys.

[UchihaYuki]

Solved it by using:

    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-graphql-request"