{"id":15694411,"url":"https://github.com/damassi/graphql-by-example","last_synced_at":"2025-05-06T20:42:51.314Z","repository":{"id":36925730,"uuid":"229691513","full_name":"damassi/graphql-by-example","owner":"damassi","description":"Example application showing how to build a full-stack server/client GraphQL app via Apollo, React, and TypeScript","archived":false,"fork":false,"pushed_at":"2023-01-05T03:47:37.000Z","size":3357,"stargazers_count":7,"open_issues_count":51,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-17T17:30:01.351Z","etag":null,"topics":["apollo","apollo-client","apollo-server","example-app","graphql","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/damassi.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}},"created_at":"2019-12-23T06:33:25.000Z","updated_at":"2023-03-08T16:47:37.000Z","dependencies_parsed_at":"2023-01-17T07:30:48.112Z","dependency_job_id":null,"html_url":"https://github.com/damassi/graphql-by-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Fgraphql-by-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Fgraphql-by-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Fgraphql-by-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damassi%2Fgraphql-by-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damassi","download_url":"https://codeload.github.com/damassi/graphql-by-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228413940,"owners_count":17915919,"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":["apollo","apollo-client","apollo-server","example-app","graphql","typescript"],"created_at":"2024-10-03T18:58:01.277Z","updated_at":"2024-12-06T04:59:43.056Z","avatar_url":"https://github.com/damassi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GraphQL by Example\n\nThis repo showcases how to build a full-stack server/client GraphQL app via Apollo, React, and TypeScript, and accompanies a [presentation that can be viewed here](https://github.com/damassi/presentations/raw/master/graphql-presentation.pdf). \n\nExamples include building a GraphQL schema around a local REST server pointed at a database, as well as integrating external service endpoints in an API-gateway-like fashion.\n\n\u003e The source within is meant to help those curious about GraphQL get started quickly through clear and simple examples, but note that the patterns are not exhaustive; GraphQL is a large and evolving topic, and as such many details have been intentionally left blank. Check out Apollo's excellent [documentation](https://www.apollographql.com/) to learn more.\n\n## Setup\n\nFirst, clone the repo locally and run:\n\n```sh\n$ yarn setup  # or npm run setup\n```\n\nThis will install all of the necessary dependencies for the server and client portions of the app. Once that's complete, run:\n\n```sh\n$ yarn start # or npm start\n```\n\nThis will\n\n- Boot the web-app at `http://localhost:3000`\n- Launch a backend server at `http://localhost:4000`\n- Open up a GraphQL Playground interface at `http://localhost:4000/graphql`\n\n## App Structure\n\nThe app is composed of two sub-apps: a [server](/server) and a [client](/client).\n\n### [Server](/server)\n\nThe server is built with [Apollo Server](https://www.apollographql.com/docs/apollo-server/) and compiled via [Backpack](https://github.com/jaredpalmer/backpack), a create-react-app-like zero-config server-side build pipeline.\n\n\u003cimg width=\"824\" alt=\"Screen Shot 2019-12-27 at 8 43 45 PM\" src=\"https://user-images.githubusercontent.com/236943/71538993-c5d84f00-28e9-11ea-8c0f-b1ec51da5812.png\"\u003e\n\nChanges to source-code are automatically hot-reloaded via Webpack, so restarts aren't required.\n\n\u003e Note that [TypeScript](https://www.typescriptlang.org/) support has been added by adding a custom `.babelrc` file and updating [`backpack.config.js`](https://github.com/damassi/graphql-by-example/blob/master/server/backpack.config.js#L30-L38)'s Webpack setup to support `.ts` files via `babel-loader`.\n\n### [Client](/client)\n\nThe client is built with [Apollo Client](https://www.apollographql.com/docs/react/) and compiled via [Create React App](https://create-react-app.dev/).\n\nThe UI is split across a few different routes. It shows how we can easily incorporate calls to external service endpoints -- in this case Penguin's public REST API -- into our schema. And in the below, we're using GraphQL to communicate with our [local server](/server)'s database and using mutations to add new records which we can then retrieve via a query:\n\n\u003cimg width=\"712\" alt=\"Screen Shot 2019-12-27 at 8 59 53 PM\" src=\"https://user-images.githubusercontent.com/236943/71539556-c32e2780-28f2-11ea-8071-535cd9da5b39.png\"\u003e\n\nAdditionally, this app demos some common UI / dev patterns, such as\n\n- [TypeScript](https://www.typescriptlang.org/)\n- Design System via [Rebass](https://rebassjs.org/) and [Styled System](https://styled-system.com/)\n- Routing via [Reach Router](https://reach.tech/router)\n- CSS-in-JS via [Styled-Components](styled-components.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamassi%2Fgraphql-by-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamassi%2Fgraphql-by-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamassi%2Fgraphql-by-example/lists"}