Frontend/Apollo

useLazyQuery, GraphQL 쿼리를 즉시 실행하지 않고 필요할 때 호출

useLazyQueryhttps://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyqueryuseLazyQuery는 Apollo Client에서 제공하는 React 훅으로, GraphQL 쿼리를 즉시 실행하지 않고, 필요할 때 호출할 수 있는 방법을 제공해 준다.일반적인 useQuery는 컴포넌트가 마운트 될 때 자동으로 쿼리를 실행하지만, useLazyQuery는 사용자가 명시적으로 실행할 때까지 대기하는 차이가 있다.  useLazyQuery를 사용할 때는 다음과 같은 형태로 사용된다:const [getQueryResult, { loading, data, error }] = useLazyQuery(MY_QUERY..

GraphQL 서버와 통신하지 않고 Apollo Client 캐시에서 직접 데이터를 읽고 쓰기

client.writeFragment을 사용해 사용자의 이메일 인증 상태를 즉시 반영 시키기import { useApolloClient } from "@apollo/client";const client = useApolloClient();client.writeFragment({ id: `User:${userData.me.id}`, // 수정할 객체의 ID fragment: gql` fragment VerifiedUser on User { verified } `, data: { verified: true // 캐시에 'verified' 필드를 true로 업데이트 }}); https://www.apollographql.com/docs/react/caching/cache-..

Apollo Link 개요와 주요 기능

Apollo Link Apollo Client에서 GraphQL 요청을 전송하고 응답을 처리하는 과정을 확장하거나 수정할 수 있는 유연한 미들웨어 시스템이다.링크 체인을 구성하여 다양한 기능을 수행할 수 있다.  요청 수정각 요청에 대해 헤더나 인증 토큰 등을 추가하거나, 변형할 수 있다.에러 처리요청 중에 발생하는 에러를 처리하거나, 재시도 로직을 구현할 수 있다.캐시 관리캐시를 관리하거나 요청을 캐시를 사용해 최적화할 수 있다.네트워크 요청HTTP를 통해 요청을 보내거나 WebSocket을 사용하여 실시간 통신을 할 수 있다.  Apollo Link는 여러 개의 링크를 체인으로 연결하여 각 단계마다 처리 로직을 추가할 수 있다.HttpLink는 기본적으로 HTTP 요청을 보내는 역할을 하고,Error..

Apollo Client 캐시 동작과 관리 방법

Apollo Client의 캐시 GraphQL 데이터를 효율적으로 저장하고 관리하기 위한 메커니즘이다.이를 통해 네트워크 요청을 최소화하고, 사용자 경험을 개선할 수 있다.Apollo Client의 기본 캐시는 InMemoryCache로, 이는 데이터를 메모리에 저장하고, 이를 통해 빠르게 데이터에 접근할 수 있다.  주요 특징과 사용 방법 기본적인 캐싱 동작 Apollo Client는 쿼리 요청 시 서버로부터 데이터를 받아 캐시에 저장한다.이후 동일한 쿼리가 발생하면 캐시에서 데이터를 불러오기 때문에 네트워크 요청을 다시 보내지 않아도 된다.  import { ApolloClient, InMemoryCache, gql } from '@apollo/client';const client = new Apol..