How to resolve 'X defined in resolvers, but not in schema' with babel-plugin-inline-import

Max Rozen
@RozenMD

The inspiration for this post comes from this closed issue in babel-plugin-inline-import (https://github.com/Quadric/babel-plugin-inline-import/issues/1) a plugin that my company uses in almost all of our projects.

Essentially, the issue is that you'll run your npm run dev script, decide to modify your resolvers, or your schema, re-run the script to get your resolvers, and boom:

'Query.X defined in resolvers, but not in schema'

The root cause here is that the babel-plugin-inline-import plugin caches your schema.

The resolution is essentially to have BABEL_DISABLE_CACHE=1 in your .env, and to have two separate webpack files, one for your graphql API, and another for your client.

In my graphql webpack config I have the following:

module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, '..'),
exclude: path.resolve(__dirname, '..', 'node_modules'),
loader: 'babel-loader'
},
{
test: /\.graphql$/,
include: path.resolve(__dirname, '..'),
exclude: path.resolve(__dirname, '..', 'node_modules'),
loader: 'graphql-tag/loader'
}
]
}

Which will include my graphql schema inline (which I keep in my project root)

Do you struggle to keep up with best practices in React?

I send a single email every two weeks with an article like this one, to help you keep track of what's happening in the React ecosystem.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 1,555 React developers that have signed up so far!