krispi1 / graphql-react-app

:bar_chart: A demo app for using GraphQl with React and Spacex API

GraphQL React Application

Description 📋

A demo app for using GraphQl, Appollo Client with React and SpaceX API.

GraphQL App DEMO 📹

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 webpack and babel ( that runs webpack-dev-server for the frontend on localhost:8080 )
3. ➡️ The schema and graphQl queries are created in schema.js
4. ➡️ We have used axios to fetch data using SpaceX API, in the created queries. ( e.g. API URL: https://api.spacexdata.com/v3/launches )
5. ➡️ GraphiQL playground is available on localhost:5000/graphql. Check demo.
6. ➡️ We have used Appolo Client to build UI in React that fetches data from GraphQL
7. ➡️ React components are created and wrapped them inside <AppoloProvider> and appolo client is then passed to these components.
8. ➡️ Reach router is used to create routes for home and individual pages.
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( Launches.js ).
12. ➡️ When user request for a particular launch item, we query that item by its id and display it on an individual page Launch.js ( e.g. We redirect the user on url http://localhost:8080/launch/1, when he request for launch item with id=1 )

GraphiQL Playground 🔲

GraphiQL Playground DEMO 📹

Installation 🔧

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

Useful Links 🔗

1. Express GraphQL github link
2. SpaceX-API
3. SpaceX-Docs
4. 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 💻

1. npm run dev:webpack runs webpack-dev-server for frontend on port 8080 in watch mode
2. npm run server runs node server for backend on localhost:5000/graphql
3. npm run dev would run both front end and backend servers on their respective ports, using concurrently
4. start Runs the server at localhost:5000/graphql in non watch mode

Built With ⚡

1. Node
2. Express
3. React
4. GraphQL
5. Appollo Client
6. Webpack
7. Babel

License

• MIT license