A GraphQL workshop to learn GraphQL implementations in JavaScript

1. GraphQL
2. React
3. Apollo Client
4. External dependency wp-graphql ( for graphql-with-wordpress branch )
5. Express
6. Node js
7. create-react-app ( uses Babel and Webpack )

1. ➡️ We have set up our backend server in node and express app ( localhost:5000/graphql ) in server.js.
2. ➡️ React application is set up using create-react-app ( that runs webpack-dev-server for the frontend on localhost:3000 )
3. ➡️ The schema and graphQl queries are created in schema.js
4. ➡️ We have used wp-graphql WordPress plugin that brings the power of GraphQL to WordPress.
5. ➡️ GraphiQL playground is available on localhost:5000/graphql.
6. ➡️ 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.
7. ➡️ We import <Apolloclient> from apollo-boost and create a new object called client and pass the url for our GraphQL endpoint into this object.
8. ➡️ We wrap our main React Component <AppoloProvider> and apollo client is then passed to these components, so that the results of your query can be passed to your components.
9. ➡️ 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.
10. ➡️ Use gpl to query the data in front react app, from the schema we have create in our node application in backend.
11. ➡️ We have displayed all the data received as response of the query on home page( Home.js ).

1. Clone this repo by running git clone https://github.com/imranhsayed/graphql-workshop
2. npm install
3. npm run dev

1. • master Creates a GraphQL server using express and nodejs and adds an endpoint at localhost:5000/graphql, where you can send all your query request.
   • It has Apollo client with React on front end .
2. graphql-with-wordpress uses GraphQL server created by wp-graphql plugin on your WordPress install and React in frontend. More info is in that branch's read me.

For graphql-with-wordpress branch Clone these repositories into plugin directory of your WordPress Install and activate them from WordPress dashboard.

1. wp-graphql
2. wp-graphiql

• Graphiql is a tool that we can use as a client to make request to our server.
• Graph QL endpoint where you can send your query request: localhost:5000/graphql

You can run these commands from root directory.

1. 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, so the below two command are not required to run if you run this ).
2. npm run dev:client starts webpack dev server for React on port 5000
3. npm run dev:server starts nodejs server on port 3000
4. npm run prod:client runs the build for production for client.

1. Express GraphQL github link
2. Apollo GraphQL

Apollo 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. When 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. Its main job is fetch some GraphQL queries and keep them in sync with one another

I would like to thank 🙏 everyone who attended the GraphQL with React and WordPress Meet up on Sep 21, 2019. The session wouldn't have been so enjoyable and fruitful without your presence.😊

📹MeetUp Highlights

📷Twitter Post with Snaps

• MIT license