https://github.com/graphan/react-apollo-typescript-java-example
Use static types in the frontend world easily thanks to GraphQL and TypeScript!
https://github.com/graphan/react-apollo-typescript-java-example
graphql java javascript react-apollo typescript webpack
Last synced: 5 months ago
JSON representation
Use static types in the frontend world easily thanks to GraphQL and TypeScript!
- Host: GitHub
- URL: https://github.com/graphan/react-apollo-typescript-java-example
- Owner: graphan
- Created: 2017-03-04T12:54:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-06T07:31:24.000Z (almost 9 years ago)
- Last Synced: 2025-02-01T08:03:50.548Z (about 1 year ago)
- Topics: graphql, java, javascript, react-apollo, typescript, webpack
- Language: Java
- Homepage:
- Size: 140 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Proof of concept: React Apollo TypeScript Java
> Use static typings in the frontend world easily!
## Concept
In vast majority of cases, both server-side and client-side use the same data model. The main difference is that data on the server and client side are respectively: statically and dynamically typed. The culprit is that REST APIs do not allow us to send information about data types by default. We just receive data values.
Harnessing such solutions as [GraphQL](http://graphql.org/) and [TypeScript](https://www.typescriptlang.org/), we can easily move static typings to the frontend world. The communication could be described as follows:
- Java -> *GraphQLSchema* -> *TypeScript Interfaces* -> React
where GraphQL Schema and TypeScript Interfaces are generated automatically.
Hence, the aim of this proof of concept is to demonstrate how to:
- expose GraphQL API in Java (compatible with [React Apollo](http://dev.apollodata.com/react/))
- generate GraphQL Schema based on Java JPA Model
- generate TypeScript Interfaces based on GraphQL Schema
- create the app consuming exposed GraphQL API
## Running the app
### 1. Server
The server side part was taken from the project: [graphql-jpa](https://github.com/jcrygier/graphql-jpa). Only some changes were needed to make it compatible with React Apollo. You just need to run the application located at: `server/src/test/groovy/org/crygier/graphql/TestApplication.groovy`
GraphQL API will be exposed at: `http://localhost:8080/graphql`
GraphiQL will be by default available at: `http://localhost:8080`
### 2. Client
The client side was created based on [typed-graphql-client-example](https://github.com/apollographql/typed-graphql-client-example). It was totally ovehauled to make it compatible with GraphQL API exposed by the above server. In order to run:
```
cd client
yarn install
npm start
```
If you want to launch the application, remember to run the above server first and then:
- Open the client at http://localhost:3000
#### How TypeScript Interfaces are generated?
`npm start` invokes two scripts behind the scenes:
- `npm run update-schema`
It downloads the GraphQL Schema from the server in JSON and save it in `client/schema/schema.json`.
- `npm run generate-graphql-types`
It generates TypeScript Interfaces based on earlier downloaded GraphQL Schema and graphql files located at: `client/src/graphql` and save them in: `client/src/interfaces.ts`