I'm using create-react-app and react-app-rewired to customize my configuration. Here is my config-overrides.js :

const { override, fixBabelImports, addLessLoader } = require('customize-cra')
const rewireInlineImportGraphqlAst = require('react-app-rewire-inline-import-graphql-ast')

module.exports = override(
  rewireInlineImportGraphqlAst,
  fixBabelImports('antd', {
    libraryDirectory: 'es',
    style: true
  }),
  fixBabelImports('ant-design-pro', {
    libraryDirectory: 'lib',
    style: true,
    camel2DashComponentName: false
  }),
  fixBabelImports('lodash', {
    libraryDirectory: '',
    camel2DashComponentName: false
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': '#308AC9',
      '@font-size-lg': '15px',
      '@menu-inline-toplevel-item-height': '34px',
      '@menu-item-height': '34px'
    }
  })
)

The react-app-rewire-inline-import-graphql-ast is used to parse graphql files during build time, so I'm able to import graphql ASTs like this using Apollo :

import React from 'react'
import editUserMutation from '../graphql/editUser.graphql'

const Editor = () => (
  <Mutation mutation={editUserMutation}>
    {mutate => ...}
  </Mutation>
)

Here is my graphql file :

mutation($email: String!, $password: String!, $name: String!, $job: String!, $website: String!, $bio: String!, $avatar: String) {
  editUser(email: $email, password: $password, name: $name, job: $job, website: $website, bio: $bio, avatar: $avatar) {
    id
  }
}

Now, here is the issue : I first made a mistake in my graphql file, writing _id instead of id, so GraphQL rightfully complained

Cannot query field "_id" on type "User"

But then after correction, GraphQL still complains about _id. I found out by logging my imported editUserMutation AST that the old flawed version was still somehow cached and used.

I tried a lot of things : - Restarting yarn start on the entire project - Rename then rename back my graphql file - Clean my browser cache

Nothing helps.

What's the issue here ? Thanks.

EDIT : I got rid of the issue by removing the node_modules folder and reinstalling my dependencies. So there might be some sort of very persistant cache in that folder, does anybody know where ?

1 Answers

1
Daniel Rearden On Best Solutions

From the documentation for the underlying plugin:

Each time you modify a GraphQL file, the node_modules/.cache/babel-loader folder must be cleared for the changes to take effect. I recommend prepending the relevant script in your package.json and rerunning the script when you change a GraphQL file:

    {
      "scripts": {
        "start": "rm -rf ./node_modules/.cache/babel-loader && node index.js"
      }
    }