Skip to content
βš’ 🚧 A GraphQL workshop to learn GraphQL implementations
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
.gitignore
README.md
graphiql.gif
graphql-meetup-tweet.png
package-lock.json
package.json
schema.js
server.js

README.md

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:

    • 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 .
  1. 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

License

You can’t perform that action at this time.