时间戳

首页 > 解决方案 > 导入graphql文件时清理创建React App的缓存

reactjs - 导入graphql文件时清理创建React App的缓存

问题描述

我正在使用 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'
    }
  })
)

用于在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. 通过记录我导入的 AST，我发现editUserMutation旧的有缺陷的版本仍然以某种方式被缓存和使用。

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

没有什么帮助。

这里有什么问题？谢谢。

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

标签： reactjsgraphqlcreate-react-appapolloapollo-client

解决方案

从底层插件的文档中：

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

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

推荐阅读