https://github.com/aaronpowell/graphql-code-generator-sample

This is a sample application using GraphQL Code Generator to convert the GraphQL schema to TypeScript types.
https://github.com/aaronpowell/graphql-code-generator-sample

graphql react typescript

Last synced: 7 days ago
JSON representation

This is a sample application using GraphQL Code Generator to convert the GraphQL schema to TypeScript types.

• Host: GitHub
• URL: https://github.com/aaronpowell/graphql-code-generator-sample
• Owner: aaronpowell
• License: mit
• Created: 2020-07-06T04:04:07.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T10:49:03.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T12:16:31.006Z (7 months ago)
• Topics: graphql, react, typescript
• Language: TypeScript
• Homepage:
• Size: 2.03 MB
• Stars: 16
• Watchers: 3
• Forks: 4
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# GraphQL Code Generator Sample App

This is a sample application showing how to use [GraphQL Code Generator](https://graphql-code-generator.com/) to generate an the TypeScript definitions from a GraphQL schema, then how to combine that with a data store that uses a different data model. The backend storage model is [CosmosDB](https://azure.microsoft.com/services/cosmos-db/?WT.mc_id=javascript-0000-aapowell) by default, using the [`trivia.json`](api/trivia.json) data (the data was generated from [Open Trivia DB](https://opentdb.com)), but there is an in-memory store you can switch to by uncommenting code in `data.ts`.

You can watch the video of the talk that this was presented at on the [BrisJS](https://brisjs.org) [YouTube Channel](https://youtu.be/p8aJqeX7TT4?t=2741).

## Azure Static Website React Template

This repository contains a template for creating an [Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-0000-aapowell) projects using React + TypeScript.

In the template there is [Create React App](https://create-react-app.dev) site using TypeScript and an `api` folder with an empty [Azure Functions](https://docs.microsoft.com/azure/functions/?WT.mc_id=javascript-0000-aapowell), also using TypeScript.

To get started, click the **Use this template** button to create a repository from this template, and check out the [GitHub docs on using templates](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template).

## Running The Application

From a terminal run `npm start` from both the repository root and `api` folder to start the two servers, the web application will be on `http://localhost:3000` and the API on `http://localhost:7071`. Alternatively, you can use the VS Code launch of `Run full stack` to run both together with debuggers attached.