{"id":16489437,"url":"https://github.com/graphan/react-apollo-typescript-java-example","last_synced_at":"2025-10-27T20:31:13.761Z","repository":{"id":233569977,"uuid":"83893244","full_name":"graphan/react-apollo-typescript-java-example","owner":"graphan","description":"Use static types in the frontend world easily thanks to GraphQL and TypeScript!","archived":false,"fork":false,"pushed_at":"2017-04-06T07:31:24.000Z","size":143,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T08:03:50.548Z","etag":null,"topics":["graphql","java","javascript","react-apollo","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"Java","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/graphan.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}},"created_at":"2017-03-04T12:54:33.000Z","updated_at":"2020-07-02T13:10:48.000Z","dependencies_parsed_at":"2024-04-16T20:07:57.570Z","dependency_job_id":null,"html_url":"https://github.com/graphan/react-apollo-typescript-java-example","commit_stats":null,"previous_names":["graphan/react-apollo-typescript-java-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphan%2Freact-apollo-typescript-java-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphan%2Freact-apollo-typescript-java-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphan%2Freact-apollo-typescript-java-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphan%2Freact-apollo-typescript-java-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphan","download_url":"https://codeload.github.com/graphan/react-apollo-typescript-java-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553100,"owners_count":19491371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","java","javascript","react-apollo","typescript","webpack"],"created_at":"2024-10-11T13:44:10.427Z","updated_at":"2025-10-27T20:31:13.412Z","avatar_url":"https://github.com/graphan.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Proof of concept: React Apollo TypeScript Java\n\n\u003e Use static typings in the frontend world easily!\n\n## Concept\n\nIn 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.\n\n 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:\n  - Java -\u003e *GraphQLSchema* -\u003e *TypeScript Interfaces* -\u003e React\n\nwhere GraphQL Schema and TypeScript Interfaces are generated automatically.\n\nHence, the aim of this proof of concept is to demonstrate how to:\n - expose GraphQL API in Java (compatible with [React Apollo](http://dev.apollodata.com/react/))\n - generate GraphQL Schema based on Java JPA Model\n - generate TypeScript Interfaces based on GraphQL Schema\n - create the app consuming exposed GraphQL API\n\n## Running the app\n\n### 1. Server\n\nThe 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`\n\nGraphQL API will be exposed at: `http://localhost:8080/graphql`\n\nGraphiQL will be by default available at: `http://localhost:8080`\n\n### 2. Client\n\nThe 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:\n\n```\ncd client\nyarn install\nnpm start\n```\n\nIf you want to launch the application, remember to run the above server first and then:\n- Open the client at http://localhost:3000\n\n#### How TypeScript Interfaces are generated?\n\n`npm start` invokes two scripts behind the scenes:\n - `npm run update-schema`\n\n    It downloads the GraphQL Schema from the server in JSON and save it in `client/schema/schema.json`.\n\n - `npm run generate-graphql-types`\n\n    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`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphan%2Freact-apollo-typescript-java-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphan%2Freact-apollo-typescript-java-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphan%2Freact-apollo-typescript-java-example/lists"}