728x90 반응형 GraphQL4 [React] Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내는 방법에 대해 적어보는 시간을 가져보려고 합니다. useLazyQuery 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 링크를 확인해보면 다음과 같이 person query를 사용하는 getPerson이라는 함수를 확인할 수 있습니다. const getPerson = (id: number) => { const { loading, error, data } = useQuery(GET_PERSON, { variables: { id, } }) if(loading) return Loading... if(error) return (Error...) retu.. 2021. 12. 28. [React] GraphQL에서 Fragment 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 GraphQL에서 Fragment 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Fragment란? Fragment는 여러 query에서 사용되는 필드들을 재사용할 수 있도록 도와줍니다. query를 작성하다 보면 중복적으로 사용되는 필드들이 존재하기 마련인데 중복되는 필드들을 각각 다 작성하는 것이 아니라 Fragment를 활용하여 중복을 줄이고 코드를 간결하게 만들어 줄 수 있습니다. Fragment와 관련된 간단한 코드를 작성해보도록 하겠습니다. Fragment 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 또한 해당 글의 스키마는 다음과 같이 구성되어 있습니다. # This directive allows re.. 2021. 12. 27. [React] Apollo를 이용하여 GraphQL 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo를 이용하여 GraphQL 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 GraphQL을 이용하여 데이터를 가져오는 서버 및 설명은 여기를 참고해주시면 됩니다. 또한 타입 스크립트를 이용하여 설정 및 구현해보도록 하겠습니다. Apollo 환경 설정 [ 1. 패키지 설치 ] $ npm install @apollo/client graphql [ 2. App.tsx에 Provider 등록 ] import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import * as React from 'react'; import Person from './pers.. 2021. 12. 26. [SpringBoot] GraphQL 설정 안녕하세요. J4J입니다. 이번 포스팅은 GraphQL사용을 위한 환경 설정 방법에 대해 적어보는 시간을 가져보려고 합니다. GraphQL이란? GraphQL은 API를 위한 쿼리 언어로 기존에 서버와 클라이언트 간 데이터 전달을 위해 많이 사용되는 Rest API의 단점들을 보완해줄 수 있는 기술입니다. Rest API의 단점은 다음과 같이 크게 2가지가 있습니다. OverFetching (오버패칭) UnderFetching (언더패칭) OverFetching은 클라이언트에서 실제로 사용되는 데이터만 불러오지 않고 사용되지 않는 데이터도 함께 불러옴으로 써 리소스의 낭비를 발생시키는 것을 의미합니다. 예를 들어 사용자 정보 중 사용자 아이디를 화면에서 사용하기 위해 API를 요청하게 되면 일반적으로 사.. 2021. 12. 23. 이전 1 다음 728x90 반응형
