wam
w__am 개발노트
wam
  • 분류 전체보기 (165)
    • CS 지식 (10)
      • 자료구조 (0)
      • 알고리즘 (0)
      • 컴퓨터 구조 (0)
      • 운영체제 (0)
      • 네트워크 (7)
      • 데이터베이스 (0)
      • 디자인 패턴 (3)
    • Frontend (131)
      • Three.js (64)
      • NPM (1)
      • Nest.js (19)
      • React (10)
      • Apollo (7)
      • TypeScript (2)
      • JavaScript (12)
      • HTML, CSS (1)
      • Jest (3)
      • E2E (5)
      • Cypress (7)
    • Database (12)
      • TypeORM (12)
    • IT 지식 (8)
      • 클라우드 서비스 (3)
      • 네트워크 (1)
      • 데이터 포맷 (2)
      • 기타 (2)
    • IT Book (2)
    • 유용한 사이트 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 🐱 Github

인기 글

태그

  • getdelta()
  • math.sin()
  • math.cos()
  • Decorators
  • 렌더링 성능 최적화
  • 오프-프레미스(off-premise) 방식
  • 데이터 포맷
  • three.js 구성 요소
  • getelapsedtime()
  • 삼각함수
  • 초기 환경설정
  • joi 에러
  • 함수 표현식
  • react 성능 최적화
  • isabstract
  • gridhelper
  • 원형적인 움직임
  • 스코프
  • axeshelper
  • threejs 개발 할 때 도움을 줄 수 있는 유틸리티
  • 디자인 패턴
  • reactive variables
  • 함수의 범위
  • Interface
  • 함수 선언문
  • mapped types
  • e.preventdefault()
  • type-graphql
  • 함수 리터럴
  • API

최근 글

관리자

글쓰기 / 스킨편집 / 관리자페이지
hELLO · Designed By 정상우.
wam

w__am 개발노트

onCompleted 내부에서 Apollo Client의 client.refetchQueries 메서드를 사용하여 쿼리를 수동으로 리패치하기
Frontend/Apollo

onCompleted 내부에서 Apollo Client의 client.refetchQueries 메서드를 사용하여 쿼리를 수동으로 리패치하기

2024. 12. 19. 00:20

 

onCompleted 함수에서 쿼리를 다시 실행하여 데이터를 리패치하기

// 기존 refetch

const [createDishMutation, { loading }] = useMutation<
  createDish,
  createDishVariables
>(CREATE_DISH_MUTATION, {
  refetchQueries: [
    {
      query: MY_RESTAURANT_QUERY,
      variables: {
        input: {
          id: +restaurantId,
        },
      },
    },
  ],
});
  • refetchQueries는 useMutation의 옵션으로 제공되는 기능이다.
  • onCompleted는 mutation이 성공적으로 실행된 후 호출되는 콜백 함수이다.

 

 

onCompleted 내부에서 Apollo Client의 client.refetchQueries 메서드를 사용하여 쿼리를 수동으로 리패치하기

// 수동패치 :  Apollo Client의 client.refetchQueries 메서드를 사용

const onCompleted = (data: CreateDishMutation) => {
  const {
    createDish: { ok }
  } = data;

  if (ok) {
    setUploading(false); // 업로드 완료 시 로딩 상태 해제

    // 쿼리를 다시 실행하여 데이터를 리패치
    client.refetchQueries({
      include: [MY_RESTAURANT_QUERY] // 리패치할 쿼리 명시
    });

    client.query({
      query: MY_RESTAURANT_QUERY,
      variables: {
        input: {
          id: +restaurantId // 필요한 변수 추가
        }
      }
    });

    history.goBack(); // 성공 시 페이지 이동
  }
};

const [createDishMutation, { loading }] = useMutation<
  CreateDishMutation,
  CreateDishMutationVariables
>(CREATE_DISH_MUTATION, { onCompleted });
  • onCompleted 함수에서 refetchQueries를 직접 호출할 수는 없다.
  • 쿼리를 다시 사용하여 refetchQueries를 사용하는 것과 동일한 효과를 얻을 수 있다.

 

 

 

 

 

저작자표시 변경금지 (새창열림)

'Frontend > Apollo' 카테고리의 다른 글

useLazyQuery, GraphQL 쿼리를 즉시 실행하지 않고 필요할 때 호출  (0) 2024.10.15
GraphQL 서버와 통신하지 않고 Apollo Client 캐시에서 직접 데이터를 읽고 쓰기  (0) 2024.10.01
Apollo Link 개요와 주요 기능  (0) 2024.09.29
Apollo Client 캐시 동작과 관리 방법  (0) 2024.09.29
GraphQL Code Generator, 타입스크립트 정의 자동 생성  (0) 2024.09.10
    'Frontend/Apollo' 카테고리의 다른 글
    • useLazyQuery, GraphQL 쿼리를 즉시 실행하지 않고 필요할 때 호출
    • GraphQL 서버와 통신하지 않고 Apollo Client 캐시에서 직접 데이터를 읽고 쓰기
    • Apollo Link 개요와 주요 기능
    • Apollo Client 캐시 동작과 관리 방법
    wam
    wam

    티스토리툴바