DEV Community

Cover image for Building a Todo List with TypeScript and React Query: A Comprehensive Guide

Building a Todo List with TypeScript and React Query: A Comprehensive Guide

wassim93 on May 14, 2024

Introduction: In the world of web development, building a todo list application is a rite of passage. In this tutorial, we'll take it a ...
Collapse
 
j471n profile image
Jatin Sharma

You can use code highlight by using the following syntax:

Image description

which will have the following output:

const name = "John";
Enter fullscreen mode Exit fullscreen mode
Collapse
 
wassim93 profile image
wassim93 • Edited

thank you i was looking for that also but i didnt know how to handle it hahah

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Why the image?

```js
const name = "John";
```

Collapse
 
mattlewandowski93 profile image
Matt Lewandowski

You should add in optimistic updates. An application like a todo app should feel like it’s running locally. You should never have to wait for a loading spinner after creating items.

React-query has great support for this: tanstack.com/query/v4/docs/framewo...

Collapse
 
wassim93 profile image
wassim93 • Edited

Thanks for your feedback 🤗
actuallty i just wanted to explain the basics of react query and their hooks to fetch and to send data i didnt focus on how the application will look like

Collapse
 
mattlewandowski93 profile image
Matt Lewandowski

Fair enough! I just never see it discussed so thought I’d drop the suggestion. Great article though 🙌

Thread Thread
 
wassim93 profile image
wassim93

i will write an article about it next time 🤗🤗 thanks dude

Collapse
 
ozz2018 profile image
Oskar Solano

Could you please publish it for JavaScript? Thanks

Collapse
 
cisc0disco profile image
Josef Malý

man, typescript is goated, just use that. Javascript without typescript is hell

Collapse
 
wassim93 profile image
wassim93 • Edited

you want just the source code ?

Collapse
 
efpage profile image
Eckehard

Can you provide a live version of the result?

Collapse
 
wassim93 profile image
wassim93 • Edited

it would be better if you clone project from respository and run it because this tutorial is just a simulation of data
you wont notice any change after doing the update of delete actions because it wont really be saved on the server side
you just need to check with inspect tab to check if the api request is being triggred succefully or not
you will find the link of repository at the end of the post

For your inquiry here is the link for the live version