The GraphQL webpack loader transforms your queries from .gql files into JavaScript modules, along with their corresponding declaration files (.d.ts), utilizing your generated TypeScript GraphQL schema model. To view the generated result, refer to the test snapshot.
And in your JavaScript:
import GqlQuery from 'query.gql'
npm install --save-dev gql-webpack-loader
or
yarn add gql-webpack-loader
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: "gql-webpack-loader",
options: {
gqlSchemaPath: path.resolve(__dirname, '../fixtures/schema.ts'),
declaration: true,
mutationInterfaceName: 'MutationModel',
queryInterfaceName: 'QueryModel',
variableInterfaceRe: (operationNode, fieldName) =>
// This used by default
new RegExp(`(${operation.operation})(${fieldName + operation.fieldOperationName})argsmodel`, 'gmi')
}
}
Whether generate corresponding declaration (d.ts) file for generated module.
Path to TypeScript GraphQL schema. You can generate TypeScript schema with the next libraries
- https://github.com/victorgarciaesgi/simple-graphql-to-typescript
- https://github.com/dotansimha/graphql-code-generator
Name of your mutation model.
Name of your query model
A function that takes an operation node as input, along with an optional nested field name, and returns a regular expression to validate variable imports. If no variable model is found, { [key: string]: any } will be used.
A function that takes a fileName as input and returns a name for the export clause in both the GraphQL JS module and its declaration.
// you should provide GraphQL execution function & the result type
type Result<T = any> = {
data?: T;
errors?: Error[];
}
const execute = <T = any, V = Record<string, any>>(module: GqlModule<T, V>, variables?: V): Promise<Result<V>> => {
// your graphql query execution implementation
}
// and later in your code
import GqlQuery from 'query.gql'
execute(GqlQuery.operation).then((response) =>
// response will have a type information about your GraphQl query
response.data.operation
)