https://github.com/andyfrith/demo-gql-ui
A minimal React Typescript application providing a simple UI that acesses GraphQL API endpoints
https://github.com/andyfrith/demo-gql-ui
graphql reactjs typescript
Last synced: 3 months ago
JSON representation
A minimal React Typescript application providing a simple UI that acesses GraphQL API endpoints
- Host: GitHub
- URL: https://github.com/andyfrith/demo-gql-ui
- Owner: andyfrith
- Created: 2020-03-23T00:46:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-06-24T07:23:07.000Z (about 1 year ago)
- Last Synced: 2025-07-09T01:52:47.063Z (about 1 year ago)
- Topics: graphql, reactjs, typescript
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# demo-gql-ui
This demo is a minimal React Typescript application providing a simple UI that acesses GraphQL API endpoints.
## Table of Contents
1. [Introduction](#introduction)
2. [Features](#features)
3. [Environment](#environment)
4. [Next Steps](#next-steps)
5. [Other Demos](#other-demos)
6. [Contact Developer](#contact-developer)
## Introduction
This very light application serves as simple demo of several technologies and best-practices with respect to React and GraphQL development. It is designed to operate alongside the GraphQL server provided by the demo-gql application.
## Features
A list of all greetings in the database is diplayed when opening [http://localhost:3000/](http://localhost:3000/) in the browser.
### Tyepscript
Why TypeScript? Because, use of types lends itself to using highly-productive development tools and practices; such as, static checking and code refactoring during JavaScript development. Additionally, there is great support for TypeScript in the development community.
### React
Why React? Because there is no better JavaScript library for building the best user interfaces!
### GraphQL
All GraphQL queries and mutations are made using the [graphql-request](https://github.com/prisma-labs/graphql-request) GraphQL client.
## Environment
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### Available Scripts
In the project directory, you can run:
#### `npm install`
Installs the necessary modules required to build and run the application.
#### `npm generate`
Generates GraphQL schema by running the the [GraphQL Code Generator](https://graphql-code-generator.com/). The GraphQL server [demo-gql](https://github.com/andyfrith/demo-gql) must be available at [http://localhost:5002/graphql](http://localhost:5002/graphql) for code generation to purposes.
#### `npm start`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
#### `npm test`
Launches the test runner in the interactive watch mode.
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
#### `npm run build`
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
## Next Steps
- Authentication
- Relay and the Connections pattern
Add examples of client-side pagination using Relay.
## Other Demos
[demo-gql](https://github.com/andyfrith/demo-gql) - the GraphQL server counterpart- a minimal Node.js Typescript application providing a GraphQL API
[react-portal](https://github.com/andyfrith/react-portal) - a React Redux application that provides simple user management tasks upon successful JWT authentication
[greasy-spoon-pos](https://github.com/andyfrith/greasy-spoon-pos) - a React Redux application that provides minimal features of a very basic restaurant Point of Sale system
[goodapplemedia.com](https://github.com/andyfrith/goodapplemedia.com) - a responsive website created with HTML5, Foundation CSS, and ES6 that demonstrates an exceptional and desirable user experience
## Contact Developer
I'm driven to deliver exemplary User Experiences and sound application architectures. I enjoy solving customer problems with excellent design and engineering- to greatly affect business success.
[Portfolio](http://goodapplemedia.com)
[Email: afrith.denver.usa@gmail.com](mailto:afrith.denver.gmail.com)
[LinkedIn](https://www.linkedin.com/in/goodapplemedia/)