GraphQL React Application
📋
Description A demo app for using GraphQl, Appollo Client with React and SpaceX API
📹
GraphQL App DEMO
📜
Details ➡️ We have set up our backend server in node and express app (localhost:5000/graphql
) inserver.js
.➡️ React application is set up using webpack and babel ( that runs webpack-dev-server for the frontend onlocalhost:8080
)➡️ The schema and graphQl queries are created inschema.js
➡️ We have used axios to fetch data using SpaceX API, in the created queries. ( e.g. API URL:https://api.spacexdata.com/v3/launches
)➡️ GraphiQL playground is available onlocalhost:5000/graphql
. Check demo.➡️ We have used Appolo Client to build UI in React that fetches data from GraphQL➡️ React components are created and wrapped them inside<AppoloProvider>
and appoloclient
is then passed to these components.➡️ Reach router is used to create routes for home and individual pages.➡️ 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(Launches.js
).➡️ When user request for a particular launch item, we query that item by its id and display it on an individual pageLaunch.js
( e.g. We redirect the user on urlhttp://localhost:8080/launch/1
, when he request for launch item with id=1 )
🔲
GraphiQL Playground
📹
GraphiQL Playground DEMO
🔧
Installation - Clone this repo by running
git clone https://github.com/imranhsayed/graphql-react-app
npm install
npm run server
🔗
Useful Links - Express GraphQL github link
- SpaceX-API
- SpaceX-Docs
- Apollo GraphQL Appollo 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.
👉
Instructions - Graphiql is a tool that we can use as a client to make request to our server.
- Graph Ql will be avialable at
localhost:5000/graphql
💻
Common Commands npm run dev:webpack
runs webpack-dev-server for frontend on port 8080 in watch modenpm run server
runs node server for backend onlocalhost:5000/graphql
npm run dev
would run both front end and backend servers on their respective ports, using concurrentlystart
Runs the server atlocalhost:5000/graphql
in non watch mode
⚡
Built With - Node
- Express
- React
- GraphQL
- Appollo Client
- Webpack
- Babel