{"id":15496405,"url":"https://github.com/imranhsayed/graphql-react-app","last_synced_at":"2025-04-22T21:28:08.313Z","repository":{"id":43593771,"uuid":"185565958","full_name":"imranhsayed/graphql-react-app","owner":"imranhsayed","description":":bar_chart: A demo app for using GraphQl with React and Spacex API","archived":false,"fork":false,"pushed_at":"2023-01-01T06:54:17.000Z","size":4941,"stargazers_count":21,"open_issues_count":26,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-28T09:04:10.281Z","etag":null,"topics":["appolloclient","babel","express","graphql","node","nodejs","react","reactjs","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/imranhsayed.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-05-08T08:36:32.000Z","updated_at":"2022-08-24T11:59:42.000Z","dependencies_parsed_at":"2023-01-31T21:00:57.931Z","dependency_job_id":null,"html_url":"https://github.com/imranhsayed/graphql-react-app","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/imranhsayed%2Fgraphql-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fgraphql-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fgraphql-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fgraphql-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imranhsayed","download_url":"https://codeload.github.com/imranhsayed/graphql-react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250327356,"owners_count":21412414,"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":["appolloclient","babel","express","graphql","node","nodejs","react","reactjs","webpack"],"created_at":"2024-10-02T08:25:08.970Z","updated_at":"2025-04-22T21:28:08.295Z","avatar_url":"https://github.com/imranhsayed.png","language":"JavaScript","readme":"# GraphQL React Application\n\n## Description :clipboard:\n\u003e A demo app for using GraphQl, Appollo Client with React and SpaceX API\n\n## GraphQL App DEMO :video_camera:\n![](GraphQl-SpaceX-Demo.gif)\n\n## Details :scroll:\n\n1. :arrow_right: We have set up our backend server in node and express app ( `localhost:5000/graphql` ) in `server.js`.\n2. :arrow_right: React application is set up using webpack and babel ( that runs webpack-dev-server for the frontend on `localhost:8080` )\n3. :arrow_right: The schema and graphQl queries are created in `schema.js`\n4. :arrow_right: We have used axios to fetch data using SpaceX API, in the created queries. ( e.g. API URL: `https://api.spacexdata.com/v3/launches` )\n5. :arrow_right: GraphiQL playground is available on `localhost:5000/graphql`. Check demo.\n6. :arrow_right: We have used Appolo Client to build UI in React that fetches data from GraphQL\n7. :arrow_right: React components are created and wrapped them inside `\u003cAppoloProvider\u003e` and appolo `client` is then passed to these components.\n8. :arrow_right: Reach router is used to create routes for home and individual pages.\n9. :arrow_right: The `graphql-tag` ( graphQl query parsing utility ) is installed and `gpl` is imported from it. The `gpl` parses GraphQL query strings into the standard GraphQL AST.\n10. :arrow_right: Use `gpl` to query the data in front react app, from the schema we have create in our node application in backend.\n11. :arrow_right: We have displayed all the data received as response of the query on home page( `Launches.js` ).\n12. :arrow_right: When user request for a particular launch item, we query that item by its id and display it on an individual page `Launch.js` \n( e.g. We redirect the user on url `http://localhost:8080/launch/1`, when he request for launch item with id=1 )\n\n## GraphiQL Playground :black_square_button:\n\n![](graphiql.png)\n\n## GraphiQL Playground DEMO :video_camera:\n\n![](GraphiQL-demo.gif)\n\n\n## Installation :wrench:\n\n1. Clone this repo by running `git clone https://github.com/imranhsayed/graphql-react-app`\n2. `npm install`\n3. `npm run server`\n\n## Useful Links :link:\n\n1. [Express GraphQL github link](https://github.com/graphql/express-graphql)\n2. [SpaceX-API](https://github.com/r-spacex/SpaceX-API)\n3. [SpaceX-Docs](https://docs.spacexdata.com/)\n4. [Apollo GraphQL](https://www.apollographql.com/docs/react/) \nAppollo Client is way to use GraphQL to build client applications. It helps you build a UI that fetches data with GraphQL, and can be used with any JavaScript front-end.\n\n\n## Instructions :point_right:\n\n* Graphiql is a tool that we can use as a client to make request to our server.\n* Graph Ql will be avialable at `localhost:5000/graphql`\n\n## Common Commands :computer:\n\n1. `npm run dev:webpack` runs webpack-dev-server for frontend on port 8080 in watch mode \n2. `npm run server` runs node server for backend on `localhost:5000/graphql`\n3. `npm run dev` would run both front end and backend servers on their respective ports, using concurrently\n4. `start` Runs the server at `localhost:5000/graphql` in non watch mode\n\n## Built With :zap:\n\n1. Node\n2. Express\n3. React\n4. GraphQL\n5. Appollo Client\n6. Webpack\n7. Babel\n\n## License\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fgraphql-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimranhsayed%2Fgraphql-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fgraphql-react-app/lists"}