0

In a typescript project I'm using graphql-tag loader in webpack to load some files from external query files - like this:

import * as queries from './queries.gql';

and the queries.gql file has a query like the following:

query get_project_rel_data get_project_related_data($id: ID!) { project(id : $id) { id key name createdDate modifiedDate products { id key name parts { id key name rendererType blocks { id key name rendererType placeholderName elements { key id content name author rendererType placeholderName } } } } } }

which gives the error

./src/modules/graphql/queries.gql
GraphQLError: Syntax Error: Expected {, found Name "get_project_related_data"

If I remove the get_project_rel_data then I get the tsx module not found error:

Type error: Cannot find module './queries.gql'. TS2307

    4 | import {DocumentNode} from 'graphql';
    5 | import gql from 'graphql-tag';
  > 6 | import * as queries from './queries.gql';

but if I remove that offending query completely then the other queries in the file work well.

if I wrap it in { I get the expected Name found $ error discussed here https://github.com/apollographql/graphql-tag/issues/180

user254694
  • 1,461
  • 2
  • 23
  • 46
  • An operation can't have multiple names, so it's not really clear what you're trying to do by writing `get_project_rel_data get_project_related_data`. You don't need any additional curly brackets, but you do need to drop one of the operation names. The name itself doesn't really matter -- you could call it `foobar` and the query will still work. More importantly, please elaborate on the "module not found error" that you saw when you corrected the syntax. – Daniel Rearden Jun 18 '19 at 12:15
  • @DanielRearden I realized I had forgotten to specify I was in a typescript solution. I have edited the answer. As noted in the question "If I remove the get_project_rel_data then I get the tsx module not found error:", this means that if I have query get_project_related_data($id: ID!).... then it throws the module not found error, which in the context since I am using graphql types I think probably is happening because the query file is now malformed and typescript is not able to import * from the file anymore. – user254694 Jun 18 '19 at 12:38
  • Have you [added custom definitions](https://webpack.js.org/guides/typescript/#importing-other-assets) for the `.gql` extension? It should look something [like this](https://github.com/apollographql/graphql-tag/issues/59#issuecomment-316991007) – Daniel Rearden Jun 18 '19 at 13:10
  • @DanielRearden I tried that but didn't work, I found actually what worked was something like this https://graphql-code-generator.com/docs/plugins/typescript-graphql-files-modules where you can see what the module declaration it makes looks like. But I don't much care for that because it seems like I should make every query I am going to export in that declaration which seems like a lot of work. – user254694 Jun 19 '19 at 11:53

0 Answers0