导入 graphql 文件时清除 Create React App 的缓存

Question

我正在使用 create-react-app 和 react-app-rewired 来自定义我的配置。这是我的 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 用于在构建期间解析 graphql 文件，因此我可以使用 Apollo 导入这样的 graphql AST：

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

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

这是我的 graphql 文件：

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
  }
}

现在，问题来了：我首先在我的 graphql 文件中犯了一个错误，写 _id 而不是 id，所以 GraphQL 理所当然地抱怨

Cannot query field "_id" on type "User"

但是在更正之后，GraphQL 仍然抱怨 _id。通过记录我导入的 editUserMutation AST，我发现旧有缺陷的版本 仍然以某种方式缓存和使用。

我尝试了很多东西： - 重新启动整个项目 yarn start - 重命名然后重命名回我的 graphql 文件 - 清理我的浏览器缓存

没有任何帮助。

这里有什么问题？谢谢。

EDIT ：我通过删除 node_modules 文件夹并重新安装我的依赖项来解决这个问题。所以那个文件夹中可能有某种非常持久的缓存，有人知道在哪里吗？

Answer 1

来自基础文档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"
      }
    }

导入 graphql 文件时清除 Create React App 的缓存

Clean Create React App's cache when importing graphql files

apollo

reactjs

graphql

create-react-app

apollo-client