https://github.com/patrick204nqh/actioncable-subscription-test-client
A simple client setup for testing real-time data updates using GraphQL subscriptions with Rails ActionCable
https://github.com/patrick204nqh/actioncable-subscription-test-client
Last synced: about 2 months ago
JSON representation
A simple client setup for testing real-time data updates using GraphQL subscriptions with Rails ActionCable
- Host: GitHub
- URL: https://github.com/patrick204nqh/actioncable-subscription-test-client
- Owner: patrick204nqh
- License: mit
- Created: 2024-07-22T05:19:42.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-07-22T05:39:30.000Z (9 months ago)
- Last Synced: 2024-07-22T06:38:31.620Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 315 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ActionCable Subscription Test Client
## Introduction
This project demonstrates a simple client setup for testing real-time data updates using GraphQL subscriptions with Rails ActionCable. Note that ActionCable requires a specific setup for WebSocket connections and testing subscriptions.
## Why Set Up a Client for Testing?
Setting up a client for testing is essential to:
- Validate real-time data updates.
- Debug issues with WebSocket connections and data handling.
- Perform end-to-end testing of the subscription flow.
## Limited Tool Support for GraphQL Subscriptions
Currently, there are limited strong tools available for testing GraphQL subscriptions. Tools like GraphQL Playground and Insomnia provide basic support but may not fully support subscription features or require additional setup. Therefore, setting up a dedicated client ensures a more comprehensive testing environment.
## Prerequisites
- Node.js (v12 or later)
- npm or yarn
## Getting Started
### 1. Clone the Repository
```sh
git clone https://github.com/patrick204nqh/actioncable-subscription-test-client.git
cd actioncable-subscription-test-client
```
### 2. Install Dependencies
```sh
npm install
# or
yarn install
```
### 3. Setup Environment Variables
Copy the `.env.example` file to `.env`:
```sh
cp .env.example .env
```
Edit the `.env` file:
```env
REACT_APP_GRAPHQL_ENDPOINT=http://localhost:3000/graphql
REACT_APP_WS_ENDPOINT=ws://localhost:3000/cable
PORT=3001
BROWSER=none
```
### 4. Start the Development Server
```sh
npm start
# or
yarn start
```
## Usage
Open your browser and navigate to `http://localhost:3001`. Open the browser console to see real-time updates logged by the `TestComponent`.
## Demo
https://github.com/user-attachments/assets/47989175-13d4-481f-ad33-127999bc297a
## License
This project is licensed under the MIT License.
---
Happy coding ⚒️🚀