{"id":23343784,"url":"https://github.com/andyfrith/demo-gql-ui","last_synced_at":"2026-05-03T23:38:06.737Z","repository":{"id":75258443,"uuid":"249301928","full_name":"andyfrith/demo-gql-ui","owner":"andyfrith","description":"A minimal React Typescript application providing a simple UI that acesses GraphQL API endpoints","archived":false,"fork":false,"pushed_at":"2025-06-24T07:23:07.000Z","size":1032,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-09T01:52:47.063Z","etag":null,"topics":["graphql","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andyfrith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-23T00:46:36.000Z","updated_at":"2020-03-27T00:42:23.000Z","dependencies_parsed_at":"2023-06-05T22:04:33.060Z","dependency_job_id":null,"html_url":"https://github.com/andyfrith/demo-gql-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andyfrith/demo-gql-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdemo-gql-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdemo-gql-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdemo-gql-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdemo-gql-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andyfrith","download_url":"https://codeload.github.com/andyfrith/demo-gql-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andyfrith%2Fdemo-gql-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32589262,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"ssl_error","status_checked_at":"2026-05-03T22:09:10.534Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","reactjs","typescript"],"created_at":"2024-12-21T06:16:23.897Z","updated_at":"2026-05-03T23:38:06.722Z","avatar_url":"https://github.com/andyfrith.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# demo-gql-ui\n\nThis demo is a minimal React Typescript application providing a simple UI that acesses GraphQL API endpoints.\n\n## Table of Contents\n\n1. [Introduction](#introduction)\n2. [Features](#features)\n3. [Environment](#environment)\n4. [Next Steps](#next-steps)\n5. [Other Demos](#other-demos)\n6. [Contact Developer](#contact-developer)\n\n## Introduction\n\nThis 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.\n\n## Features\n\n\u003cimg src=\"https://github.com/andyfrith/demo-gql-ui/blob/master/greetings.png\" alt=\"Greetings\" /\u003e\n\nA list of all greetings in the database is diplayed when opening [http://localhost:3000/](http://localhost:3000/) in the browser.\n\n### Tyepscript\n\nWhy 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.\n\n### React\n\nWhy React? Because there is no better JavaScript library for building the best user interfaces!\n\n### GraphQL\n\nAll GraphQL queries and mutations are made using the [graphql-request](https://github.com/prisma-labs/graphql-request) GraphQL client.\n\n## Environment\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n### Available Scripts\n\nIn the project directory, you can run:\n\n#### `npm install`\n\nInstalls the necessary modules required to build and run the application.\n\n#### `npm generate`\n\nGenerates 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.\n\n#### `npm start`\n\nRuns the app in the development mode.\u003cbr /\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n#### `npm test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr /\u003e\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n#### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr /\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\n## Next Steps\n\n- Authentication\n- Relay and the Connections pattern\n\nAdd examples of client-side pagination using Relay.\n\n## Other Demos\n\n[demo-gql](https://github.com/andyfrith/demo-gql) - the GraphQL server counterpart- a minimal Node.js Typescript application providing a GraphQL API\n\n[react-portal](https://github.com/andyfrith/react-portal) - a React Redux application that provides simple user management tasks upon successful JWT authentication\n\n[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\n\n[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\n\n## Contact Developer\n\nI'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.\n\n[Portfolio](http://goodapplemedia.com)\n\n[Email: afrith.denver.usa@gmail.com](mailto:afrith.denver.gmail.com)\n\n[LinkedIn](https://www.linkedin.com/in/goodapplemedia/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyfrith%2Fdemo-gql-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandyfrith%2Fdemo-gql-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandyfrith%2Fdemo-gql-ui/lists"}