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

Question

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).

Masih Jahangiri Masih Jahangiri · Accepted Answer · 2019-11-07T16:59:07

First add webpack loader to your webpack config according to apollo document.

loaders: [
  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader'
  }
]

You not must use double quotation in .graphql file for variables. So your queries.graphql must be like this:

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

And the last you must pass variables to your query as follows:

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

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

1 Answers