https://github.com/williamlsh/react-graphql-github-vanilla
A custom GraphQL client for Github simply implemented with vanilla React and Fetch API
https://github.com/williamlsh/react-graphql-github-vanilla
graphql javascript react
Last synced: 4 months ago
JSON representation
A custom GraphQL client for Github simply implemented with vanilla React and Fetch API
- Host: GitHub
- URL: https://github.com/williamlsh/react-graphql-github-vanilla
- Owner: williamlsh
- Archived: true
- Created: 2018-05-04T10:15:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T22:09:24.000Z (about 3 years ago)
- Last Synced: 2025-02-18T07:26:29.994Z (11 months ago)
- Topics: graphql, javascript, react
- Language: JavaScript
- Homepage:
- Size: 1.57 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React GraphQL
> A custom GraphQL client for Github simply implemented with vanilla React and Fetch API
## Screenshots
## Table of Contents
- [GraphQL Query](#graphql-query)
- [Features](#features)
- [Description](#description)
----
### GraphQL Query
#### The GraphQL API has the following features
- objects and fields
- nested objects
- fragments
- arguments and variables
- operation names
- directives
##### $ Introduction
Objects hold data about an entity. You can access the data by using a so called field in GraphQL. Fields are used to ask for specific properties that are available in objects.
A query in its most basic form consists of objects and fields in GraphQL terms. Objects can also be called fields.
Input:
```bash
{
viewer {
name
url
}
}
```
Output:
```bash
{
"data": {
"viewer": {
"name": "Robin Wieruch",
"url": "https://github.com/rwieruch"
}
}
}
```
When it comes to `aliases` and `arguments` and also `operation names`, you can compare it to `function names` and `function arguments` in `functions`.
Input
```bash
{
book: organization(login: "the-road-to-learn-react") {
...sharedOrganizationFields
}
company: organization(login: "facebook") {
...sharedOrganizationFields
}
}
fragment sharedOrganizationFields on Organization {
name
url
}
```
Output
```bash
{
"data": {
"book": {
"name": "The Road to learn React",
"url": "https://github.com/the-road-to-learn-react"
},
"company": {
"name": "Facebook",
"url": "https://github.com/facebook"
}
}
}
```
##### $ Advantages
GraphQL makes specifications to requests not on a *request level* but on a *field level*. Comparing to REST API, it saves bandwidth.
----
### Features
- Bootstrapped with [create-react-app](https://github.com/facebook/create-react-app)
- Github GraphQL API
- Consuming GraphQL with vanilla JavaScript
- No Apollo/Relay
- Powered by Fetch API (no [Axios](https://github.com/axios/axios))
- Using [GraphQL Playground](https://github.com/graphcool/graphql-playground) as developing tool.
----
### Description
This project is constructed with the instructions of this article: [A complete React with GraphQL Tutorial](https://www.robinwieruch.de/react-with-graphql-tutorial/#graphql-query-github-api). The front end app is implemented with vanilla react(as I call it), and makes asynchronous requests to Github GraphQL API only by Fetch API since it's powerful enough.
----
### Contributions
- `Branch` and/or `clone` the repo locally.
- `cd` into it
- install all the require packages: `npm i`
- build the project: `npm run build`
- start the project: `npm start`
You should replace the Github Token with your own by either pasting it to `.env` file or just pasting it to the `Authorization` property in `headers`. The former is recommended for security's account.