Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bettenoch/tanstack_opeapi_project_setup
This project demonstrates the integration of HeyApi, Tanstack Query, and Tanstack Router in a modern React application built with TypeScript and Vite. The goal is to showcase how to efficiently manage API requests, caching, and client-side routing using these tools in a performant and scalable way.
https://github.com/bettenoch/tanstack_opeapi_project_setup
openapi routing-protocols tanstack tanstack-react-query tanstack-router typescript
Last synced: about 1 month ago
JSON representation
This project demonstrates the integration of HeyApi, Tanstack Query, and Tanstack Router in a modern React application built with TypeScript and Vite. The goal is to showcase how to efficiently manage API requests, caching, and client-side routing using these tools in a performant and scalable way.
- Host: GitHub
- URL: https://github.com/bettenoch/tanstack_opeapi_project_setup
- Owner: Bettenoch
- Created: 2024-09-10T07:38:24.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-10T10:46:58.000Z (2 months ago)
- Last Synced: 2024-10-14T05:01:30.959Z (about 1 month ago)
- Topics: openapi, routing-protocols, tanstack, tanstack-react-query, tanstack-router, typescript
- Language: TypeScript
- Homepage:
- Size: 82 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React TypeScript Vite App with HeyApi, Tanstack Query, and Tanstack Router
## Table of Contents
- [Introduction](#introduction)
- [Technologies Used](#technologies-used)
- [Project Structure](#project-structure)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Key Features](#key-features)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
## Introduction
This project demonstrates the integration of [HeyApi](https://heyapi.co), [Tanstack Query](https://tanstack.com/query), and [Tanstack Router](https://tanstack.com/router) in a modern React application built with TypeScript and Vite. The goal is to showcase a real-world example of how to manage API requests, client-side caching, and routing in a performant and scalable React application.
By combining these powerful tools, this project helps developers build efficient data-fetching strategies, optimize user experiences, and create maintainable applications with minimal configuration overhead.
## Technologies Used
- **React** - A JavaScript library for building user interfaces
- **TypeScript** - A typed superset of JavaScript that compiles to plain JavaScript
- **Vite** - A fast development build tool
- **HeyApi** - A powerful API service for building and managing APIs easily
- **Tanstack Query** - A powerful asynchronous state management library for handling API requests and caching
- **Tanstack Router** - A lightweight routing solution optimized for React
## Project Structure
- **Prerequisites**
Make sure you have the following installed on your system:
Node.js (v14 or higher)
npm or yarn
# Getting Started
## Prerequisites
Make sure you have the following installed on your system:
- Node.js (v14 or higher)
- npm or yarn
## Installation
Clone the repository:
```bash
git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name
```
## Key Features
- API Management with HeyApi: Integration with HeyApi for seamless API request handling.
- Data Fetching Caching with Tanstack Query: Efficiently fetch and cache data to improve performance.
- Routing with Tanstack Router: Lightweight and modern routing for React applications.
- TypeScript Support: Ensures type safety and scalability with TypeScript throughout the app.
- Vite for Fast Builds: Instant server start and fast hot module replacement (HMR) during development.
## Usage
1. To define API endpoints and manage data fetching, navigate to the src/api and src/services directories.
2. To add routes, use the src/router directory where Tanstack Router is configured.
3. Reusable components can be added to the src/components folder to keep your UI modular.
## Example Code Snippet
Here's a brief example of how to set up Tanstack Query with HeyApi:
```tsx
import { useQuery } from '@tanstack/react-query';
import { fetchData } from './api';
const MyComponent = () => {
const { data, isLoading, error } = useQuery(['key'], fetchData);
if (isLoading) return
Loading...
;
if (error) return Error loading data
;
return
{data?.message};
};
```
## Contributing
- Contributions are welcome! If you’d like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcomed.
1. Fork the project
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the **LICENSE** file for details.