당근먹는하니
귀엽고 행복해
당근먹는하니
전체 방문자
오늘
어제
  • 분류 전체보기 (274)
    • 다람쥐🐿 (26)
    • C++ 공부빵야 (7)
    • 공부👻 (5)
    • 프론트엔드✏️ (228)
      • 코드캠프 (120)
      • 팀 프로젝트✨ (31)
      • 개인공부 (67)
    • 프론트엔드 - 바닐라js (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • CSS
  • 코드캠프
  • ssg
  • HTML
  • 공통 컴포넌트
  • typescript
  • next.js
  • graphql
  • 회고
  • 팀 프로젝트
  • 팀플
  • javascript
  • refreshtoken
  • react
  • javascrpit
  • emotion
  • 프론트엔드
  • 배열
  • 알고리즘
  • React-hook-form
  • 프로그래머스
  • 배포
  • JS
  • 부트캠프
  • 자바스크립트
  • algorithm
  • 리액트
  • 팀프로젝트
  • 코딩
  • 코딩 부트캠프

최근 댓글

최근 글

티스토리

250x250
반응형
hELLO · Designed By 정상우.
당근먹는하니

귀엽고 행복해

프론트엔드✏️/개인공부

[react-query] QueryClient, - 작성 중

2022. 9. 20. 16:54
728x90
반응형

 

QueryClient는 캐시와 상호작용하기 위해 사용된다.

 

// app.js에서
import { QueryClient } from "react-query";

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
          <Hydrate state={pageProps.dehydratedState}>
            <MyLayout>
              <Component {...pageProps} />
            </MyLayout>
          </Hydrate>
          <ReactQueryDevtools />
        </QueryClientProvider>
        
        
        
// 사용할 때 
import { useQueryClient } from "react-query";

const queryClient = useQueryClient();

 

 

 

queryCache, mutationCache와 상관이 있다.

 

queryClient.resetQueries("쿼리키", { exact: true });

The resetQueries method can be used to reset queries in the cache to their initial state based on their query keys or any other functionally accessible property/state of the query.

This will notify subscribers — unlike clear, which removes all subscribers — and reset the query to its pre-loaded state — unlike invalidateQueries. If a query has initialData, the query's data will be reset to that. If a query is active, it will be refetched.

 

exact: true는 쿼리키가 완전히 일치하는 것에만 적용할지에 대한 것!

false면 "쿼리키"를 포함하고 있는 쿼리들에 대해 리셋적용! 

 

// 모든 쿼리 취소
await queryClient.cancelQueries()

// 쿼리키 'posts' 포함하는 비활성 쿼리를 제거
queryClient.removeQueries('posts', { inactive: true })

 

queryClient.removeQueries("쿼리키", { exact: true });

The removeQueries method can be used to remove queries from the cache based on their query keys or any other functionally accessible property/state of the query.

 

 

 

 

 

 

KeepPreviousData

 

새 데이터가 오는 동안 그 이전의 데이터를 사용할 것인지에 대한 여부 

isPreviousData - 쿼리가 어떤 데이터를 가지고 오고 있는지 알 수 있다. 

 

 

  const { mutate, reset: saveReset } = useMutation(savemandu, {
    onSuccess: async (data) => {
      console.log("data", data);
      queryClient.invalidateQueries("getmandu");
      props.setCreateOpen(false);
      setReset(!reset);
      await ResetData();
      await saveReset();
    },
    onError: (error) => {
      console.log(error);
    },
  });

api를 날리고 선택했던 값들을 날리기 위해 이것저것 붙여봤었다.

일단 useMutation에서 saveReset은 당연히 효과가 없다. 이건 캐시랑 관련이 있기 때문에! 

 

 

 

 

 

  {props?.open && (
<DataSelect
                selectData={
                  props.reset
                    ? props.resetData && props.resetData[`${item.name}`]
                    : props.data && props.data[`${item.name}`]
                }
                error={props?.error[`${item.name}`.replaceAll("_", "")]}
                onChange={(event: any) =>
                  props?.onChangeInput &&
                  props?.onChangeInput(
                    `${item.name}`.replaceAll("_", ""),
                    event
                  )
                }
                value={props?.data[`${item.name}`]}
              />

 

https://tanstack.com/query/v4/docs/reference/QueryClient

 

QueryClient | TanStack Query Docs

QueryClient The QueryClient can be used to interact with a cache:

tanstack.com

 

 

 

728x90
반응형
저작자표시 비영리 동일조건 (새창열림)

'프론트엔드✏️ > 개인공부' 카테고리의 다른 글

유효성 검사, 정규표현식  (0) 2022.09.21
유효성 검사 - 작성 중  (0) 2022.09.20
useEffect vs useLayoutEffect  (1) 2022.09.19
[react-to-print] 리액트 컴포넌트 프린트하기 💌  (0) 2022.09.16
[react-query, ] invalidateQueries, 에러 박스  (1) 2022.09.16
    '프론트엔드✏️/개인공부' 카테고리의 다른 글
    • 유효성 검사, 정규표현식
    • 유효성 검사 - 작성 중
    • useEffect vs useLayoutEffect
    • [react-to-print] 리액트 컴포넌트 프린트하기 💌
    당근먹는하니
    당근먹는하니

    티스토리툴바