Usemutation react query typescript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

React Query, Axios, Typescript example: get, post, put, delete — useQuery, useMutation, error handling

bezkoder/react-query-axios-typescript

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

React Query with Axios and Typescript example

React Client with React Query and Axios (Typescript) to make CRUD requests to Rest API in that:

• React Query Axios Typescript GET request: get all Tutorials, get Tutorial by Id, find Tutorial by title
• React Query Axios Typescript POST request: create new Tutorial
• React Query Axios Typescript PUT request: update an existing Tutorial
• React Query Axios Typescript DELETE request: delete a Tutorial, delete all Tutorials

For instruction, please visit:

Fullstack with Node Express:

Fullstack with Spring Boot:

Integration (run back-end & front-end on same server/port)

This project was bootstrapped with Create React App.

About

React Query, Axios, Typescript example: get, post, put, delete — useQuery, useMutation, error handling

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

useMutation & TypeScript #1332

I’m using useMutation hook with TypeScript. I took example from documentation:
https://react-query.tanstack.com/docs/guides/optimistic-updates

I noticed that when typing it return value expects to be Promise | TSnapshot .
Example that is provided returns void , which throws error when typechecking.

What is the best approach to fix it?
Should I just move setQueryData to onError like it is done in examples page?
https://react-query.tanstack.com/docs/examples/optimistic-updates
Or provide custom return type instead of using the one defined in type?
Or maybe it is a bug that should be fixed by updating types?

Also is there an easier way to get correct typing in getQueryData and setQueryData without need to specify type on every call?

const [mutatePostTodo] = useMutation( (text) => axios.post("/api/data", < text >), < onMutate: (text) =>< setText(""); cache.cancelQueries("todos"); const previousValue = cache.getQueryData("todos"); cache.setQueryData("todos", (old) => (< . old, items: [. old.items, text] >)); // returning like this causes error with typescript // if you return just previous value and use cache.setQueryData in onError it will work correctly return () => cache.setQueryData("todos", previousValue); >, // this works in JS, but TS does not like it, because rollback type is expected to be Promise | TSnapshot onError: (err, variables, rollback) => rollback() , // After success or failure, refetch the todos query onSettled: () => < cache.invalidateQueries("todos"); >> ); 

Beta Was this translation helpful? Give feedback.

5 You must be logged in to vote

Источник