https://github.com/mapledevjs/graphql-tutorial
Introduction to the GraphQL
https://github.com/mapledevjs/graphql-tutorial
graphql react vite
Last synced: 7 days ago
JSON representation
Introduction to the GraphQL
- Host: GitHub
- URL: https://github.com/mapledevjs/graphql-tutorial
- Owner: mapleDevJS
- Created: 2021-01-08T16:30:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T15:18:49.000Z (about 2 months ago)
- Last Synced: 2025-03-13T16:28:23.678Z (about 2 months ago)
- Topics: graphql, react, vite
- Language: JavaScript
- Homepage: https://graphql-tutorial.netlify.app/
- Size: 2.81 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/graphql-tutorial/deploys)
# My Apollo Client Application
This project is a React application that interacts with the GitHub GraphQL API using Apollo Client.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Components](#components)
- [GraphQL Queries](#graphql-queries)
- [License](#license)
## Installation
To get started with this project, clone the repository and install the dependencies:
```sh
git clone
cd
npm install
```
Ensure you add a `.env` file in the root directory and specify your GitHub API token:
```sh
VITE_GITHUB_API_TOKEN=your_github_token_here
```
## Usage
To run the application, use the following command:
```sh
npm run dev
```
This will start the development server, and you can view the app in your browser at `http://localhost:3000`.
## Components
This application includes the following key components:
- **`Apollo Client Setup`**: The setup for Apollo Client, including linking HTTP and authentication headers.
- **`App Component`**: The main React component that renders the application.
## Detailed Explanation
### GraphQL URI
The application connects to the GitHub GraphQL API using the following URI:
```javascript
const GRAPHQL_URI = 'https://api.github.com/graphql';
```
## GraphQL Queries
### Popular Repositories List
This query retrieves a list of repositories with more than 50,000 stars, returning the top 10 results:
```javascript
const POPULAR_REPOSITORIES_LIST = gql`
{
search(query: "stars:>50000", type: REPOSITORY, first: 10) {
repositoryCount
edges {
node {
... on Repository {
name
owner {
login
}
stargazers {
totalCount
}
}
}
}
}
}
`;
client.query({ query: POPULAR_REPOSITORIES_LIST }).then(console.log);
```
## License
This project is licensed under the MIT License.