DEV Community

Cover image for How to resolve import for the .graphql file with typescript and webpack

How to resolve import for the .graphql file with typescript and webpack

Mohsen ZareZardeyni on July 10, 2019

Hi, I’m Mohsen ZareZardeyni, and I’m a software engineer at Sigma Telecom LLC. At Sigma, for developing our back office application, we decided to...
Read full post
Collapse
 
lewislbr profile image
Lewis Llobera •

What advantages has using .graphql extension?

Collapse
 
qortex profile image
Michael Monerau •

Taken from the docs:

It comes with a loader easy to setup and with some benefits:

  1. Do not process GraphQL ASTs on client-side
  2. Enable queries to be separated from logic
Collapse
 
lishine profile image
Pavel Ravits •

This link is about wepback with client

Thread Thread
 
qortex profile image
Michael Monerau •

Ah right, didn't pay attention since I use it client-side. So only second point might apply in a server environment.

Collapse
 
qortex profile image
Michael Monerau •

Thanks, clear & concise!

Also had to add "allowSyntheticDefaultImports": true to my tsconfig.json.

Collapse
 
deadcoder0904 profile image
Akshay Kadam (A2K) •

Hey, nice tutorial. FYI, your first 2 gists should be interchanged. tsconfig.json should be first & graphql.d.ts should be second :)

Collapse
 
mohsen89z profile image
Mohsen ZareZardeyni •

Thanks:)

Collapse
 
captain_keon profile image
Keon •

Thanks for the tutorial, this helped me import graphql files to use with apollo server :)

Collapse
 
romhayh profile image
romhayh •

I tried it, and it worked, but in vscode i do not get the benefit of auto import of the gql files. When i try to use the query file, i have no auto complete for it.