Inject TypedDocumentNode and type the graphql-operation automatically

Hello,

**Is your feature request related to a problem? Please describe.**

Right now when we use the `@graphql-codegen/typed-document-node`, it generates the TypedDocumentNode along with the node definition.

When using the `gql` template string from `graphql-tag` for defining the operations, we already have the node definition. This part should be solved by https://github.com/dotansimha/graphql-code-generator/issues/5043

I'd like to go one step further, and let graphql-codegen import and type the operation for me.

**Describe the solution you'd like**

With this plugin or option added to `@graphql-codegen/typed-document-node` we would go from this file :
```tsx
// Dog.tsx
import gql from "graphql-tag"

const GET_DOG_PHOTO = gql`
query getDogPhoto($breed: String!) {
dog(breed: $breed) {
id
displayImage
}
}
`;

```

to this modified file after the codegen step :
```tsx
// Dog.tsx
import gql from "graphql-tag"
import { GetDogPhotoDocument } from "./Dog.generated"

const GET_DOG_PHOTO: GetDogPhotoDocument = gql`
query getDogPhoto($breed: String!) {
dog(breed: $breed) {
id
displayImage
}
}
`;

```

**Describe alternatives you've considered**

In a perfect world, having a way to externally overwrite type variables defined in a file using typescript module augmentation using a `Dog.d.ts` file wouldn't necessitate to alter the original file, but I don't think it's possible currently.

**Additional context**

If the plugin modify the original file, we need to ensure that graphql-codegen isn't starting the generation twice when using the `watch` mode.