How to load query from .graphql file with angular and typescript

I am working on an app with Angular and Ionic. As a backend I have a node server running ApolloServer with Neo4j (using grandstarter.io). On the client-side I currently have a file called queries.ts where I have defined my graphql queries like this:

supplierByName = (value) => {
    const query = gql`
    {
        Supplier(filter: {name: "${value}"}) {
            name
        }
    }
    `;

    return query;
};

I am using apollo so I am doing like this to run my graphql query

this.apollo.query({
                query: this.queries.supplierByName(supplierName)
            })
            .subscribe(....)

Now, due to not liking to have my graphql queries as strings I would like to have my queries in a .graphql file directly. Better tooling when working directly in a graphql file and honestly its mostly because the queries hurt my eyes right now :)

I would like to have it like this(file: queries.graphql):

query supplierByName($value: String) {
 Supplier(filter: { name: "$value}" }) {
    name
 }
}

then when I execute graphql query with Apollo I would like to do something like this:

 import supplierByName from './queries.graphql'
 .....
 this.apollo.query({
                query: supplierByName(supplierName)
            })
            .subscribe(....)

and use it with apollo in some easy way. I have looked at this answer but from what I can gather it has to do with ApolloServer. I want to simply parse the graphql queries on the client. I found this article that came close to what I need but it also has to do with ApolloServer. I am using Angular 8.1.2

All the examples in the Apollo documentation with angular shows examples with the way I currently have built my queries with strings and the use of gql (graphql-tag).

from How to load query from .graphql file with angular and typescript