Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jimmymcbride/tetris-experiment
https://github.com/jimmymcbride/tetris-experiment
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/jimmymcbride/tetris-experiment
- Owner: JimmyMcBride
- Created: 2020-03-28T20:17:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T02:25:21.000Z (almost 2 years ago)
- Last Synced: 2023-03-04T15:29:54.015Z (almost 2 years ago)
- Language: TypeScript
- Homepage: https://tetris-experiment.now.sh
- Size: 3.44 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeScript and GraphQL Example
One of the strengths of GraphQL is [enforcing data types on runtime](https://graphql.github.io/graphql-spec/June2018/#sec-Value-Completion). Further, TypeScript and [GraphQL Code Generator](https://graphql-code-generator.com/) (graphql-codegen) make it safer by typing data statically, so you can write truly type-protected code with rich IDE assists.
This template extends [Apollo Server and Client Example](https://github.com/zeit/next.js/tree/canary/examples/api-routes-apollo-server-and-client#readme) by rewriting in TypeScript and integrating [graphql-let](https://github.com/piglovesyou/graphql-let#readme), which runs [TypeScript React Apollo](https://graphql-code-generator.com/docs/plugins/typescript-react-apollo) in [graphql-codegen](https://github.com/dotansimha/graphql-code-generator#readme) under the hood. It enhances the typed GraphQL use as below.
```typescript jsx
import { useNewsQuery } from './news.graphql'
const News: React.FC = () => {
// Typed already️⚡️
const { data: { news } } = useNewsQuery()
if (news)
{news.map(...)}
}
```
## Deploy your own
Deploy the example using [ZEIT Now](https://zeit.co/now):
[](https://zeit.co/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-typescript-graphql)
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
npm init next-app --example with-typescript-graphql with-typescript-graphql-app
# or
yarn create next-app --example with-typescript-graphql with-typescript-graphql-app
```
### Download manually
Download the example:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript-graphql
cd with-typescript-graphql
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Deploy it to the cloud with [ZEIT Now](https://zeit.co/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
## Notes
By default `**/*.graphqls` is recognized as GraphQL schema and `**/*.graphql` as GraphQL documents. If you prefer the other extensions, make sure the settings of the webpack loader in `next.config.js` and `.graphql-let.yml` are consistent.
Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree