Graphql typescript typing and codegen

Question

The library called apollo-codegen allows one to create types on the client for a graphQL schema. However it expect the gql queries to be put in a .graphql file.

My question is: how can I use the query when they are in a .graphql file ?

I was previously doing this in my .ts files

const ssQuery = gql`
    subscription suppliers {
        suppliers {
            id,
            name
        }
    }
`;

Daniel Rearden Daniel Rearden · Accepted Answer · 2018-05-07T16:47:24

Assuming you're using webpack, graphql-tag includes a loader to import the queries.

// webpack.config.js

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

// in your project
import MY_QUERY from './my-query.graphql'

graphql(MY_QUERY)(MyComponent)

Be mindful that doing this means you should have only one query/mutation/subscription per file. However, you can also create files for fragments and import them inside the graphql file (not sure if apollo-codegen supports this syntax though).

Graphql typescript typing and codegen

1 Answers