https://github.com/specmatic/specmatic-order-graphql-ui-react
https://github.com/specmatic/specmatic-order-graphql-ui-react
sample-project
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/specmatic/specmatic-order-graphql-ui-react
- Owner: specmatic
- Created: 2024-07-12T06:44:28.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-06-29T00:58:41.000Z (28 days ago)
- Last Synced: 2026-06-29T02:20:56.173Z (28 days ago)
- Topics: sample-project
- Language: JavaScript
- Size: 47 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Specmatic UI project for GraphQL demo
## Pre-requisites
- Node v20.x and above
- Docker Desktop
Install the node packages for this project.
```shell
npm install
```
## Running automated UI Component tests with Specmatic GraphQL Stub
```shell
npm test
```
## Bringing up the React application independently with Specmatic GraphQL Stub
### Start up the Specmatic stub
```shell
npm run specmatic:stub
```
### Testing the Specmatic stub
Use the following curl commands to test if the stub is working as expected -
1. Simple query
- On Unix terminals:
```shell
curl -X POST http://localhost:8080/graphql \
-H "Content-Type: application/json" \
-d '{
"query": "query { findAvailableProducts(type: gadget, pageSize: 10) { id name inventory type } }"
}'
```
- On Windows Powershell:
```shell
curl -X POST http://localhost:8080/graphql `
-H "Content-Type: application/json" `
-d '{
"query": "query { findAvailableProducts(type: gadget, pageSize: 10) { id name inventory type } }"
}'
```
- On Windows Command Prompt:
```shell
curl -X POST http://localhost:8080/graphql ^
-H "Content-Type: application/json" ^
-d "{\"query\": \"query { findAvailableProducts(type: gadget, pageSize: 10) { id name inventory type } }\"}"
```
1. Query with variables
- On Unix terminals:
```shell
curl -X POST http://localhost:8080/graphql \
-H "Content-Type: application/json" \
-d '{
"query": "query FindAvailableProducts($type: ProductType!, $pageSize: Int!) { findAvailableProducts(type: $type, pageSize: $pageSize) { id name inventory type } }",
"variables": {
"type": "gadget",
"pageSize": 10
}
}'
```
- On Windows Powershell:
```shell
curl -X POST http://localhost:8080/graphql `
-H "Content-Type: application/json" `
-d '{
"query": "query FindAvailableProducts($type: ProductType!, $pageSize: Int!) { findAvailableProducts(type: $type, pageSize: $pageSize) { id name inventory type } }",
"variables": {
"type": "gadget",
"pageSize": 10
}
}'
```
- On Windows Command Prompt:
```shell
curl -X POST http://localhost:8080/graphql ^
-H "Content-Type: application/json" ^
-d "{\"query\": \"query FindAvailableProducts($type: ProductType!, $pageSize: Int!) { findAvailableProducts(type: $type, pageSize: $pageSize) { id name inventory type } }\", \"variables\": {\"type\": \"gadget\", \"pageSize\": 10}}"
```
### Start the application
```shell
npm start
```
This should automatically start the application and pull it up in your browser.
### Explore the GraphQl spec using GraphiQL
You can now open [GraphiQL](http://localhost:8080/_specmatic/graphiql) in your browser and test out some GraphQL queries.
This instance of GraphiQL is served by Specmatic Enterprise's mock instance running on http://localhost:8080