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正确地抱怨了

无法查询类型为“用户”的字段“ _id”

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

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

没有帮助。

这是什么问题？谢谢。

编辑：通过删除node_modules文件夹并重新安装我的依赖项，我摆脱了这个问题。因此，该文件夹中可能存在某种非常持久的缓存，有人知道吗？

Answer 1

来自基础plugin的文档中：

每次修改GraphQL文件时，必须清除node_modules / .cache / babel-loader文件夹，以使更改生效。我建议在package.json中添加相关脚本，并在更改GraphQL文件时重新运行该脚本：

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

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

1 个答案: