GraphQL React Application
📋
Description A GraphQL workshop to learn GraphQL implementations in JavaScript
📹
GraphQL App DEMO ⚡
Built With - GraphQL
- React
- Apollo Client
- External dependency wp-graphql ( for
graphql-with-wordpress
branch ) - Express
- Node js
- create-react-app ( uses Babel and Webpack )
📜
Details ➡️ We have set up our backend server in node and express app (localhost:5000/graphql
) inserver.js
.➡️ React application is set up using create-react-app ( that runs webpack-dev-server for the frontend onlocalhost:3000
)➡️ The schema and graphQl queries are created inschema.js
➡️ We have used wp-graphql WordPress plugin that brings the power of GraphQL to WordPress.➡️ GraphiQL playground is available onlocalhost:5000/graphql
.➡️ 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.➡️ We import<Apolloclient>
fromapollo-boost
and create a new object calledclient
and pass the url for our GraphQL endpoint into this object.➡️ We wrap our main React Component<AppoloProvider>
and apolloclient
is then passed to these components, so that the results of your query can be passed to your components.➡️ Thegraphql-tag
( graphQl query parsing utility ) is installed andgpl
is imported from it. Thegpl
parses GraphQL query strings into the standard GraphQL AST.➡️ Usegpl
to query the data in front react app, from the schema we have create in our node application in backend.➡️ We have displayed all the data received as response of the query on home page(Home.js
).
📹
GraphiQL Playground DEMO
🔧
Installation - Clone this repo by running
git clone https://github.com/imranhsayed/graphql-workshop
npm install
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 .
- master Creates a GraphQL server using express and nodejs and adds an endpoint at
- 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.
👉
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.
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 ).npm run dev:client
starts webpack dev server for React on port5000
npm run dev:server
starts nodejs server on port3000
npm run prod:client
runs the build for production for client.
🔗
Useful Links
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