{"id":15496334,"url":"https://github.com/imranhsayed/graphql-workshop","last_synced_at":"2025-04-22T21:27:49.776Z","repository":{"id":39381760,"uuid":"208621643","full_name":"imranhsayed/graphql-workshop","owner":"imranhsayed","description":"⚒ 🚧 A GraphQL workshop to learn GraphQL implementations","archived":false,"fork":false,"pushed_at":"2023-01-08T07:35:33.000Z","size":2813,"stargazers_count":19,"open_issues_count":7,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-28T09:04:10.345Z","etag":null,"topics":["api","apollo","apollo-client","express","express-graphql","graphql","graphql-ser","graphql-server-express","headless-cms","javascript","nodejs","query-api","react","wordpress"],"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-09-15T16:20:11.000Z","updated_at":"2023-07-29T00:56:15.000Z","dependencies_parsed_at":"2023-02-08T05:15:31.184Z","dependency_job_id":null,"html_url":"https://github.com/imranhsayed/graphql-workshop","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-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fgraphql-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fgraphql-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imranhsayed%2Fgraphql-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imranhsayed","download_url":"https://codeload.github.com/imranhsayed/graphql-workshop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250327261,"owners_count":21412394,"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":["api","apollo","apollo-client","express","express-graphql","graphql","graphql-ser","graphql-server-express","headless-cms","javascript","nodejs","query-api","react","wordpress"],"created_at":"2024-10-02T08:24:35.246Z","updated_at":"2025-04-22T21:27:49.759Z","avatar_url":"https://github.com/imranhsayed.png","language":"JavaScript","readme":"# GraphQL React Application\n\n## Description :clipboard:\n\u003e A GraphQL workshop to learn GraphQL implementations in JavaScript\n\n## GraphQL App DEMO :video_camera:\n\n## Built With :zap:\n1. GraphQL\n2. React\n3. Apollo Client\n4. External dependency [wp-graphql](https://github.com/wp-graphql/wp-graphql) ( for `graphql-with-wordpress` branch )\n5. Express\n6. Node js\n7. create-react-app ( uses Babel and Webpack )\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 [create-react-app](https://github.com/facebook/create-react-app) ( that runs webpack-dev-server for the frontend on `localhost:3000` )\n3. :arrow_right: The schema and graphQl queries are created in `schema.js`\n4. :arrow_right: We have used [wp-graphql](https://github.com/wp-graphql/wp-graphql) WordPress plugin that brings the power of GraphQL to WordPress. \n5. :arrow_right: GraphiQL playground is available on `localhost:5000/graphql`.\n6. :arrow_right: We have used Apollo Client to build UI in React that fetches data from GraphQL. Apollo client help us create a query and binds our React component with the query, so that when component renders, and handles any queries to GraphQl server and return the results.\n7. :arrow_right: We import `\u003cApolloclient\u003e` from `apollo-boost` and create a new object called `client` and pass the url for our GraphQL endpoint into this object.\n8. :arrow_right: We wrap our main React Component `\u003cAppoloProvider\u003e` and apollo `client` is then passed to these components, so that the results of your query can be passed to your components.\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( `Home.js` ).\n\n## GraphiQL Playground DEMO :video_camera:\n![](graphiql.gif)\n\n\n## Installation :wrench:\n\n1. Clone this repo by running `git clone https://github.com/imranhsayed/graphql-workshop`\n2. `npm install`\n3. `npm run dev`\n\n## Branches Information:\n\n1. * [master](https://github.com/imranhsayed/graphql-workshop) Creates a GraphQL server using express and nodejs and adds an endpoint at `localhost:5000/graphql`, where you can send all your query request.\n   * It has Apollo client with React on front end .\n2. [graphql-with-wordpress](https://github.com/imranhsayed/graphql-workshop/tree/graphql-with-wordpress) uses GraphQL server created by [wp-graphql](https://github.com/wp-graphql/wp-graphql) plugin on your WordPress install and React in frontend. More info is in that branch's read me.\n\n\n\n## Plugins for GraphQL with WordPress :electric_plug:\n\nFor `graphql-with-wordpress` branch Clone these repositories into plugin directory of your WordPress Install and activate them from WordPress dashboard.\n\n1. [wp-graphql](https://github.com/wp-graphql/wp-graphql)\n2. [wp-graphiql](https://github.com/wp-graphql/wp-graphiql)\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 endpoint where you can send your query request: `localhost:5000/graphql`\n\n## Common Commands :computer:\n\nYou can run these commands from root directory.\n\n1. `npm run dev` runs webpack-dev-server for frontend on port 3000 in watch mode and backend server on port 5000. ( Uses concurrently package to run the two servers together,\n so the below two command are not required to run if you run this ).\n2. `npm run dev:client` starts webpack dev server for React on port `5000`\n3. `npm run dev:server` starts nodejs server on port `3000`\n4. `npm run prod:client` runs the build for production for client.\n\n## Useful Links :link:\n\n1. [Express GraphQL github link](https://github.com/graphql/express-graphql)\n2. [Apollo GraphQL](https://www.apollographql.com/docs/react/) \n\nApollo 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.\nWhen two components need the same data. If an action triggers an update on update, the second one won’t be updated . Apollo solves this using `reactive cache` feature.\nIts main job is fetch some GraphQL queries and keep them in sync with one another\n\n## Thank you Note 🙏 \n\nI would like to thank 🙏 everyone who attended the [GraphQL with React and WordPress Meet](https://www.meetup.com/Pune-WordPress-Knowledge-Exchange/events/264252479/) up on Sep 21, 2019.\nThe session wouldn't have been so enjoyable and fruitful without your presence.😊 \n\n📹[MeetUp Highlights](http://bit.ly/2kXSGJF)\n\n📷[Twitter Post with Snaps](https://twitter.com/imranhsayed/status/1175398297579638785?s=20)\n\n![](graphql-meetup-tweet.png)\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-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimranhsayed%2Fgraphql-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimranhsayed%2Fgraphql-workshop/lists"}