react-app-rewired与GraphQL Subscriptions集成

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

你是否在使用create-react-app开发实时应用时遇到过WebSocket连接配置难题？是否因不想执行eject命令而放弃了高级Webpack配置？本文将展示如何使用react-app-rewired在不暴露配置的情况下，轻松集成GraphQL Subscriptions实现实时数据更新。读完本文后，你将能够：掌握自定义Webpack配置的技巧、理解GraphQL Subscriptions工作原理、实现React应用的实时数据推送功能。

项目背景与挑战

react-app-rewired是一个允许开发者在不执行eject命令的情况下修改create-react-app Webpack配置的工具。项目核心原理是通过config-overrides.js文件拦截并修改默认配置，同时保持create-react-app的零配置优势。

在实时应用开发中，GraphQL Subscriptions通过WebSocket协议实现服务器向客户端的实时数据推送，这需要在Webpack配置中添加相应的loader和插件支持。传统方案需要执行npm run eject暴露所有配置文件，这会导致项目维护复杂度显著增加。

集成步骤

1. 安装必要依赖

首先需要安装GraphQL相关依赖和WebSocket支持：

npm install @apollo/client graphql subscriptions-transport-ws --save
npm install react-app-rewire-inline-import-graphql-ast --save-dev

2. 配置config-overrides.js

修改项目根目录下的config-overrides.js文件，添加GraphQL支持和WebSocket配置：

const { override, addWebpackModuleRule } = require('customize-cra');
const graphqlLoader = require('react-app-rewire-inline-import-graphql-ast');

module.exports = override(
  // 添加GraphQL文件支持
  graphqlLoader(),
  
  // 添加WebSocket支持
  addWebpackModuleRule({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
  })
);

3. 创建Apollo客户端实例

在src目录下创建apollo-client.js文件，配置支持Subscriptions的Apollo客户端：

import { ApolloClient, InMemoryCache, split, HttpLink } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';

// HTTP连接
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
});

// WebSocket连接
const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://localhost:4000/graphql',
}));

// 分割连接，根据操作类型路由到不同的链接
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache()
});

export default client;

4. 在应用中使用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-client';
import './index.css';
import App from './App';

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

5. 实现GraphQL订阅组件

创建一个订阅组件，例如src/components/MessageSubscription.js：

import { useSubscription, gql } from '@apollo/client';

const MESSAGE_SUBSCRIPTION = gql`
  subscription OnMessageAdded {
    messageAdded {
      id
      content
      author
      timestamp
    }
  }
`;

function MessageSubscription() {
  const { data, error, loading } = useSubscription(MESSAGE_SUBSCRIPTION);

  if (loading) return <p>正在连接到实时服务器...</p>;
  if (error) return <p>错误: {error.message}</p>;

  return (
    <div className="message">
      <h3>{data.messageAdded.author} 说:</h3>
      <p>{data.messageAdded.content}</p>
      <small>{new Date(data.messageAdded.timestamp).toLocaleTimeString()}</small>
    </div>
  );
}

export default MessageSubscription;

验证与测试

Webpack配置验证

运行以下命令验证Webpack配置是否正确应用：

npm run build -- --verbose

检查输出日志，确认GraphQL loader和WebSocket相关配置已正确添加。

功能测试

在App组件中引入MessageSubscription组件：

import MessageSubscription from './components/MessageSubscription';

function App() {
  return (
    <div className="App">
      <h1>实时消息系统</h1>
      <MessageSubscription />
    </div>
  );
}

启动应用并测试实时消息接收功能：

npm start

常见问题解决

WebSocket连接失败

如果遇到WebSocket连接问题，检查config/webpackDevServer.config.js中的代理设置，确保WebSocket请求被正确代理：

// 在devServer配置中添加
proxy: {
  '/graphql': {
    target: 'http://localhost:4000',
    ws: true,
    changeOrigin: true
  }
}

GraphQL文件导入错误

确保在config-overrides.js中正确配置了GraphQL loader，并且使用.graphql或.gql扩展名保存GraphQL查询文件。

总结与扩展

通过react-app-rewire-inline-import-graphql-ast插件和自定义Webpack配置，我们成功在不执行eject的情况下集成了GraphQL Subscriptions。这种方法保持了create-react-app的简洁性，同时提供了足够的灵活性来满足实时应用开发需求。

社区中还有许多基于react-app-rewired的插件可以扩展项目功能，例如：

• react-app-rewire-styled-components：为Styled Components添加支持
• react-app-rewire-less：添加Less预处理器支持
• react-app-rewire-typescript：集成TypeScript支持

希望本文能够帮助你构建更强大的实时React应用。如有任何问题，欢迎查阅项目README_zh.md或提交issue。

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