react-app-rewired与Hasura GraphQL集成配置

龚盼韬

302人浏览 · 2025-10-20 05:24:50

龚盼韬 · 2025-10-20 05:24:50 发布

react-app-rewired与Hasura GraphQL集成配置

【免费下载链接】react-app-rewired Override create-react-app webpack configs without ejecting 项目地址: https://gitcode.com/gh_mirrors/re/react-app-rewired

你是否在使用create-react-app开发React应用时，遇到需要自定义Webpack配置但又不想执行eject操作的困境？react-app-rewired提供了无需eject即可覆盖Webpack配置的解决方案。本文将详细介绍如何使用react-app-rewired集成Hasura GraphQL，解决前后端数据交互的常见问题，让你轻松实现GraphQL API的调用与管理。读完本文，你将掌握react-app-rewired的基本配置方法、Hasura GraphQL的集成步骤以及相关的开发技巧。

项目概述

react-app-rewired是一个允许开发者在不执行eject操作的情况下，自定义create-react-app创建的React应用的Webpack配置的工具。它通过在项目根目录下创建config-overrides.js文件，提供了覆盖Webpack、Jest、DevServer等配置的能力。

Hasura GraphQL是一个开源的GraphQL引擎，它可以快速将PostgreSQL数据库转换为GraphQL API，提供了实时数据订阅、权限管理等功能。将react-app-rewired与Hasura GraphQL集成，可以让前端开发者更便捷地使用GraphQL API，提升开发效率。

环境准备

安装react-app-rewired

首先，确保你的项目是使用create-react-app创建的。然后，安装react-app-rewired：

npm install react-app-rewired --save-dev

修改package.json脚本

打开项目的package.json文件，将scripts部分中的react-scripts替换为react-app-rewired：

"scripts": {
-  "start": "react-scripts start",
+  "start": "react-app-rewired start",
-  "build": "react-scripts build",
+  "build": "react-app-rewired build",
-  "test": "react-scripts test",
+  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

创建config-overrides.js文件

在项目根目录下创建config-overrides.js文件，该文件将用于配置Webpack等相关设置。初始内容如下：

module.exports = {
  webpack: function(config, env) {
    // 在这里添加Webpack配置覆盖
    return config;
  },
  jest: function(config) {
    // 在这里添加Jest配置覆盖
    return config;
  },
  devServer: function(configFunction) {
    // 在这里添加DevServer配置覆盖
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      return config;
    };
  }
};

集成Hasura GraphQL

安装相关依赖

为了在React应用中使用GraphQL，我们需要安装Apollo Client和相关依赖：

npm install @apollo/client graphql --save

配置代理解决跨域问题

由于前端应用和Hasura GraphQL服务可能运行在不同的端口，会出现跨域问题。我们可以通过配置DevServer的代理来解决。修改config-overrides.js文件中的devServer部分：

devServer: function(configFunction) {
  return function(proxy, allowedHost) {
    const config = configFunction(proxy, allowedHost);
    
    // 添加代理配置
    config.proxy = {
      '/graphql': {
        target: 'http://localhost:8080/v1/graphql', // Hasura GraphQL服务地址
        changeOrigin: true,
        pathRewrite: {
          '^/graphql': ''
        }
      }
    };
    
    return config;
  };
}

创建Apollo Client实例

在src目录下创建apollo.js文件，用于创建Apollo Client实例：

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({
  uri: '/graphql', // 与代理配置中的路径一致
});

const authLink = setContext((_, { headers }) => {
  // 可以在这里添加认证信息
  return {
    headers: {
      ...headers,
      'x-hasura-admin-secret': 'your-admin-secret', // Hasura管理员密钥
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

export default client;

在应用中使用Apollo Provider

修改src/index.js文件，使用Apollo Provider包装应用：

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/client';
import client from './apollo';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

serviceWorker.unregister();

示例：查询Hasura GraphQL数据

在组件中使用GraphQL查询数据，例如创建一个UserList组件：

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

export default UserList;

高级配置

自定义Webpack加载器

如果需要添加自定义的Webpack加载器，可以在config-overrides.js的webpack配置中进行修改。例如，添加对GraphQL文件的支持：

const path = require('path');

module.exports = {
  webpack: function(config, env) {
    // 添加GraphQL加载器
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader'
    });
    
    return config;
  },
  // ...其他配置
};

使用customize-cra简化配置

customize-cra是一个为react-app-rewired提供的工具集，可以简化Webpack配置的覆盖过程。安装customize-cra：

npm install customize-cra --save-dev

然后，修改config-overrides.js文件：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = {
  webpack: override(
    addWebpackModuleRule({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader'
    })
  ),
  // ...其他配置
};