GraphQL React Application

Description 📋

A GraphQL workshop to learn GraphQL implementations in JavaScript

GraphQL App DEMO 📹

Built With ⚡

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 )

Details 📜

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 ).

GraphiQL Playground DEMO 📹

Installation 🔧

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

Branches Information:

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.

Plugins for GraphQL with WordPress 🔌

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

Instructions 👉

• 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

Common Commands 💻

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.

Useful Links 🔗

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

Thank you Note 🙏

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

License

• MIT license