I am currently developing an app using Angular and Ionic. For the backend, I have set up a node server running ApolloServer with Neo4j (utilizing grandstarter.io). On the frontend, I have a file named queries.ts where I define my graphql queries in the following format:
supplierByName = (value) => {
const query = gql`
{
Supplier(filter: {name: "${value}"}) {
name
}
}
`;
return query;
};
To execute my graphql query using apollo, I call it like this:
this.apollo.query({
query: this.queries.supplierByName(supplierName)
})
.subscribe(....)
However, I find having my graphql queries as strings cumbersome and would prefer to store them directly in a .graphql file for better tooling and readability. Here is how I envision the contents of the queries.graphql file:
query supplierByName($value: String) {
Supplier(filter: { name: "$value}" }) {
name
}
}
Then, when executing the graphql query with Apollo, I aim to do something like this:
import supplierByName from './queries.graphql'
.....
this.apollo.query({
query: supplierByName(supplierName)
})
.subscribe(....)
This approach seems more straightforward to me. I have come across some resources on Stack Overflow and dev.to that discuss similar concepts, but they seem to focus on ApolloServer rather than client-side implementation. I am working with Angular 8.1.2 and would appreciate any insights or resources related to this setup.
The examples in the Apollo documentation typically demonstrate building queries using strings and gql (graphql-tag). I am looking to streamline this process by utilizing .graphql files directly.