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

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)

Tired of infinite re-renders when using useEffect?

A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.

Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.

In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.

Master useEffect, in a single afternoon.