'apollo-upload-client' 모듈을 찾을 수 없었던 이슈..
·
이슈 저장소
결론부터 말하자면,버전 문제 였다. 무지성으로 최근 버전을 인스톨해줬는데, 18.x.x 버전에서 문제가 있는거같다고 한다.그래서 아래의 버전으로 재인스톨해줘서 해결해줬다."apollo-upload-client": "^17.0.5","@types/apollo-upload-client": "^17.0.5",  출처:https://stackoverflow.com/questions/74508867/module-not-found-cant-resolve-apollo-upload-client Module not found: Can't resolve 'apollo-upload-client'I'm on Next.js and can't resolve this issue. I don't find any opened issu..
cache.modify 와 cache.writeQuery의 차이점과 활용법
·
개인 공부/graphql
그래프큐엘과 아폴로 클라이언트(Apollo Client)를 사용할 때, 캐시 관리는 매우 중요한 부분입니다.특히, cache.modify와 cache.writeQuery는 아폴로 캐시를 업데이트하는 두 가지 주요 방법입니다. 이 두 메서드는 비슷한 목적을 가지지만, 사용 방법과 적용 시나리오에 차이가 있습니다. 아래에서 각각의 메서드와 그 차이점을 예시와 함께 설명하겠습니다. cache.modifycache.modify는 아폴로 캐시에서 특정 필드를 변경할 때 사용됩니다.이 메서드는 필드 수준에서 캐시를 조작할 수 있는 기능입니다.  사용 시점캐시된 데이터의 특정 필드만 업데이트할 때여러 쿼리에서 동일한 필드를 공유하고 있을 때부분적인 데이터 갱신이 필요할 때 예시새로운 아이템을 리스트에 추가하는 예제를..
Apollo Client에서 데이터 캐싱 설정 - 전역 캐시 설정
·
개인 공부/graphql
GraphQL 클라이언트에서 데이터 캐싱은 성능 향상과 네트워크 요청 최소화를 위해 매우 중요합니다.Apollo Client는 강력한 캐싱 메커니즘을 제공하며, 이를 통해 서버와의 상호작용을 더욱 효율적으로 관리할 수 있습니다.이번 포스트에서는 `InMemoryCache`를 사용하여 캐싱을 설정하는 방법을 설명하겠습니다. 캐시 설정 코드다음은 InMemoryCache를 설정하는 코드입니다.여기서 주요 포인트는 `typePolicies`를 사용하여 특정 쿼리와 필드의 캐싱 동작을 정의하는 것입니다. import { InMemoryCache } from '@apollo/client';import { ALL } from '../../utils/constants';const cache = new InMemory..
Graphql문 효율성 증가 - fragment
·
개인 공부/graphql
fragment는 그래프큐엘에서 반복되는 쿼리들의 필드들을 따로 모아두고 불러오는 기능을 말합니다.이 기능의 사용 예시를 기록하겠습니다. 사용법사용법은 아래와 같습니다.fragment "이름" on "해당fragment가 참조할 스키마 이름" { (반복해서 사용될 필드명 배치)} 이것을 실제로 적용해보면 이렇습니다. fragment itemFields on Item { _id itemName itemPrice itemCategoryId itemImage} 이렇게 작성된 fragment는 사용할 Query 또는 Mutation에서 자바스크립트의 스프레드 연산자와 같이 사용이 가능합니다. query { items{ ...itemFileds }} 그렇지만 실무에서는 다음과 같이 상..
그래프큐엘 타입정의
·
개인 공부/graphql
그래프큐엘로 쿼리문과 뮤테이션문을 작성할때 타입을 정의해야합니다.scaler타입과 필수타입을 명시하는 느낌표(!) 작성과, inerface, union, enum, subscription 등등의 타입선언 방식에대해서 정리하려고합니다. scalerscaler 타입이란? 하나의 수치만으로 완전히 표시가 되는 양을 뜻합니다.int, string, booleans, id, float 등등이 있습니다.  느낌표 (!) - 필수 타입 선언필수 타입을 명시해줍니다.token! 이라고 명시되어있다면 token값은 필수로 들어와야하는 값이라는 뜻입니다.배열 형태로된 것은 조금 느낌이다릅니다.[test] // null 가능[test!] // 매개 값의 배열들이 필수로 들어와야하고,리턴되는 값이 null 허용,[test]!..
그래프큐엘 사용하는 이유
·
개인 공부/graphql
그래프 큐엘을 사용하는 이유에대해서 글을 정리했습니다.간단히 정리한것으로 그래프큐엘에대해서 한 눈에 파악하고 싶은 사람에게 유용할것 같은 글입니다. 그래프큐엘은..그래프큐엘은 기존의 Rest-api를 보완하고 발전시킨것 입니다.그래프큐엘은 정보를 요청하는쪽에서 원하는 형태로 정보를 가져오고 수정할 수 있는 API로써query language와 유사한 형태의 API입니다.query language란?: 데이터 베이스에 접근해 CRUD를 하는 언어로 보통 SQL같은걸 뜻합니다. 즉 graphql은 생성,조회,수정,삭제하는 기능을 서버와 통신할 수 있게 만든 언어입니다.장점구체적인 정보만을 골라서 가져올 수 있습니다. (오버 페칭 해결)단일 요청으로 많은 데이터를 얻을 수 있습니다. (언더 페칭 해결)API ..