Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .github/PULL_REQUEST_TEMPLATE.md

This file was deleted.

55 changes: 55 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
# Contributing

We welcome contribution from everyone.

## Issues

You can contribute to this repository

- Improving our [docs](https://mugglim.github.io/build-your-own-tanstack-query/).
- Improving our [tanstack-query-lite](https://github.com/mugglim/build-your-own-tanstack-query/tree/chore/add-contributing/tanstack-query-lite) features.

## Get started

### Installation

Please follow these steps to get started:

- Fork and clone this repository

```
cd build-your-own-tanstack-query
```

- Install package
```
npm install
```

### Run docs dev server

```
npm run docs:dev
```

### Run dev server

```
npm run dev
```

## Pull Requests

We merge pull requests by squashing all commits.
Please ensure your PR template titles match the example below.

```
<type>: <description>
```

`type` must be one of the following:

- `feat`: A new tanstack-query-lite feature.
- `docs`: Documentation only changes.
- `fix`: A bug fix
- `chore`: Anything else
29 changes: 9 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,18 @@
<div align="center">
<h1> Build Your Own TanStack Query and useQuery</h1>
</div>
# Build Your Own TanStack Query

<p align="center">
<a href="https://mugglim.github.io/build-your-own-tanstack-query">한국어</a> | <a href="/en.md">English</a>
</p>
<a href="https://mugglim.github.io/build-your-own-tanstack-query">한국어</a> | <a href="/en.md">English</a>

## Introduction

We're going to rewrite TanStack Query and useQuery from scratch. We'll be using the ideas and code from [Let's Build React Query in 150 Lines of Code!](https://www.youtube.com/watch?v=9SrIirrnwk0) and TanStack Query v5.
We're going to rewrite TanStack Query and useQuery from scratch.
We'll be using the ideas and code from [Let's Build React Query in 150 Lines of Code!](https://www.youtube.com/watch?v=9SrIirrnwk0) and TanStack Query v5.

## Play Locally

Install package

```
npm install
```
## Demo

Run development server
https://github.com/user-attachments/assets/11454b80-034a-4205-b051-5a3c78f1b9d0

```
npm run dev
```
## Contributing

## Demo
We welcome contribution from everyone. Read below for contributing guidelines.

https://github.com/user-attachments/assets/11454b80-034a-4205-b051-5a3c78f1b9d0
[CONTRIBUTING](/CONTRIBUTING.md)
46 changes: 22 additions & 24 deletions en.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
<div align="center">
<h1> Build Your Own TanStack Query and useQuery</h1>
</div>
# Build Your Own TanStack Query and useQuery

<p align="center">
<a href="./docs/ko.md">한국어</a> | <a href="/README.md">English</a>
</p>
<a href="./docs/ko.md">한국어</a> | <a href="/README.md">English</a>

## Introduction

We're going to rewrite TanStack Query and useQuery from scratch. We'll be using the ideas and code from [Let's Build React Query in 150 Lines of Code!](https://www.youtube.com/watch?v=9SrIirrnwk0) and TanStack Query v5.
We're going to rewrite TanStack Query and useQuery from scratch.
We'll be using the ideas and code from [Let's Build React Query in 150 Lines of Code!](https://www.youtube.com/watch?v=9SrIirrnwk0) and TanStack Query v5.

> [!WARNING]
>
Expand All @@ -21,23 +18,24 @@ We're going to rewrite TanStack Query and useQuery from scratch. We'll be using

## TOC

- [Introduction](#introduction)
- [TOC](#toc)
- [Play Locally](#play-locally)
- [Architecture](#architecture)
- [Step 1: Core Implementation](#step-1-core-implementation)
- [QueryClient](#queryclient)
- [QueryCache](#querycache)
- [Query](#query)
- [QueryObserver](#queryobserver)
- [Step 2: Integration with React](#step-2-integration-with-react)
- [Trigger re-render when the state of Query changes](#trigger-re-render-when-the-state-of-query-changes)
- [QueryClientProvider](#queryclientprovider)
- [useQuery](#usequery)
- [Step 3: Additional Features](#step-3-additional-features)
- [1. Trigger refetch when the browser’s focus state changes](#1-trigger-refetch-when-the-browsers-focus-state-changes)
- [2. Creating a developer tool like ReactQueryDevtools](#2-creating-a-developer-tool-like-reactquerydevtools)
- [Reference](#reference)
- [Build Your Own TanStack Query and useQuery](#build-your-own-tanstack-query-and-usequery)
- [Introduction](#introduction)
- [TOC](#toc)
- [Play Locally](#play-locally)
- [Architecture](#architecture)
- [Step 1: Core Implementation](#step-1-core-implementation)
- [QueryClient](#queryclient)
- [QueryCache](#querycache)
- [Query](#query)
- [QueryObserver](#queryobserver)
- [Step 2: Integration with React](#step-2-integration-with-react)
- [Trigger re-render when the state of Query changes](#trigger-re-render-when-the-state-of-query-changes)
- [QueryClientProvider](#queryclientprovider)
- [useQuery](#usequery)
- [Step 3: Additional Features](#step-3-additional-features)
- [1. Trigger refetch when the browser’s focus state changes](#1-trigger-refetch-when-the-browsers-focus-state-changes)
- [2. Creating a developer tool like ReactQueryDevtools](#2-creating-a-developer-tool-like-reactquerydevtools)
- [Reference](#reference)

## Play Locally

Expand Down