GraphQL9 Apollo Client:: 캐시된 데이터 다루기 프로젝트 하다가 이미 캐시된 데이터를 가공해야할 필요가 있어서 자료 찾다가 공식 Doc을 읽게 되었다. (www.apollographql.com/docs/react/caching/cache-interaction/) 서버와 통신하지 않고 Apollo Client cache를 직접 읽고 쓸 수 있는 방법. 이전에 서버에서 불러온 데이터 및 로컬에서만 쓸 수 있는 데이터와 상호작용 한다. readQuery 캐시에서 바로 GraphQL 쿼리를 실행할 수 있는 메소드. const READ_TODO = gql` query ReadTodo($id: ID!) { todo(id: $id) { id text completed } } `; // Fetch the cached to-do item with ID 5 const .. 2021. 3. 26. Apollo :: 아폴로 클라이언트, 클라이언트 사이드 아키텍쳐 Khalil Stemmler, Apollo Client & Client-side Architecture Basics을 읽고 정리한 글 2월 한 달, 아주 잠시 실무를 경험한 이후에 단순히 코드가 작동하는 것 말고 더 견고하고 유연한 구조를 가진, 좋은 코드를 작성하는 것에 관심이 생겼다. 관련된 자료를 계속 찾아 읽으려고 노력 중이다. 이번에 GraphQL과 Apollo를 공부하고 쓰면서도 염두에 두었던 부분이고, Apollo Blog에 좋은 자료들이 많아 조금씩 보고 있다. 그 중 클라이언트 사이드 아키텍처 베이직이라는, 비단 아폴로 뿐만 아니라 전반적인 클라이언트 단 코드 구성에 대해 설명된 글이 있어서 읽게 되었다. 소프트웨어 디자인이란 구조와 개발자 경험의 결합이라는 테제로 글을 시작한다. 우리가.. 2021. 3. 23. Apollo GraphQL Error: "Cannot read property 'startsWith' of undefined" 기존 프로젝트의 서버를 Apollo graphQL로 재구축하는 작업을 하고 있는데 schema 작성하고, dataSource로 Open API에서 데이터 가져온 다음, 해당 쿼리에 대한 resolver 까지 작성해서 테스트를 하다가 에러가 발생했다. "Cannot read property 'startsWith' of undefined" 에러 메세지는 위와 같았다. 우선, 대부분의 경우에 undefined는 비동기 요청을 했는데 데이터가 미처 들어오지 못하는 경우에 자주 봤던 것 같아서 RESTDataSource를 확장하여 인스턴스를 만들어준 클래스의 API URL을 확인했다. 결론부터 말하자면 다음과 같이 바꾸어 주었다. 전: const AGE_ZERO_KINDERGARTEN_URL = `https://.. 2021. 3. 17. Fullstack Part 8 #5 Fragments and subscriptions fullstackopen.com/en/part8/fragments_and_subscriptions를 읽고 정리한 글. Fullstack part8 | Open online course on Javascript based modern web development by University of Helsinki and Houston Inc.. fullstackopen.com 목차 🔸 fragments - 반복되는 쿼리 결과를 변수에 선언하여 재사용 하는 방법 🔸 subscriptions - 브라우저에서 서버로 요청하는 방식이 아니라 반대로 서버에서 브라우저로 알림을 받는 것 🔸 n + 1 문제 - 불필요한 쿼리 발생을 join 쿼리 혹은 populate로 최적화 fragments 여러 쿼리가 비슷한 결과를 리.. 2021. 3. 12. Fullstack Part 8 #4 Login & Cache update fullstackopen.com/en/part8/login_and_updating_the_cache 읽고 정리한 글. Fullstack part8 | Open online course on Javascript based modern web development by University of Helsinki and Houston Inc.. fullstackopen.com 목차 🔸 유저 로그인 - 로그아웃 시, apollo client의 캐시를 지우는 resetStore 🔸 헤더에 토큰 추가 - httpLink, apollo-link-context로 아폴로가 서버와 연결되는 방식에 접근하여 헤더를 수정 🔸 캐시 업데이트, revisited - useMutation의 update 옵션을 통해 최적화. read.. 2021. 3. 11. Fullstack Part 8 #3 DB fullstackopen.com/en/part8/database_and_user_administration 를 읽고 정리한 글. 🔸 MongoDB와 GraphQL 백엔드를 연결 🔸 유저 등록 및 유효성 검사 🔸 server 객체의 context로 유저 로그인 여부 확인 🔸 auth가 필요한 작업을 하는 방법 ( 친구 리스트에 새로운 값 추가 등 ) MongoDB npm install mongoose mongoose-unique-validator - 몽구스로 Schema 생성 const mongoose = require('mongoose') const schema = new mongoose.Schema({ name: { type: String, required: true, unique: true, minl.. 2021. 3. 10. Fullstack part 8 #2 React and GraphQL - GraphQL은 기본적으로 HTTP POST 요청으로 값을 얻는다. - 따라서 Postman을 활용할 수 있다. http://localhost:4000/graphql로 query 키 값을 보내면 된다. - 혹은 axios를 통해 리액트와 GraphQL 사이에서 데이터를 교환하는 것도 가능한다. 그렇지만 ☞ 번거로우니 불필요한 디테일을 알아서 처리해주는 higher order library를 씁시다. ☞ 두 가지 옵션: Apollo Client와 페이스북의 Relay Apollo client npm install @apollo/client graphql import React from 'react' import ReactDOM from 'react-dom' import App from './App' i.. 2021. 3. 9. Fullstack Part 8 #1 GraphQL-server 공부하려고 fullstackopen.com/en/part8/graph_ql_server 번역 및 정리한 글 Schema & Query type Person { name: String! phone: String street: String! city: String! id: ID! } type Query { personCount: Int! allPersons: [Person!]! findPerson(name: String!): Person } - schema에 타입들을 지정 Person: - 문자열은 GraphQL의 스칼라 타입 중 하나 - !: 필수. Non-Null. - ID: 문자열, unique Query 모든 GraphQL schema는 어떤 쿼리가 API에 만들어져야 하는지 알려주는 Query를 기.. 2021. 3. 8. REST와 GraphQL REST: - 서버가 브라우저에게 제공하는 인터페이스를 사용하는 방법. 서로 다른 웹 어플리케이션이 공통으로 사용 가능. - 리소스 기반 ( 예: /users/10 ) - 리소스에 대한 작업은 해당 URL에 대한 HTTP 요청들로 이루어진다. 상황 #1 소셜 미디어 기능이 있는 어플리케이션. 블로그 리스트를 보여주고 싶은데, 내가 팔로우하는 블로그 중에서 유저들이 코멘트를 남긴 글만 보고 싶은 경우 - HTTP 요청 여러번 해야함 - 불필요한 데이터도 받게 됨 - 브라우저 코드 복잡해짐 GraphQL: - 브라우저의 코드가 원하는 데이터에 대한 query를 작성하고, 이를 HTTP POST 요청으로 API로 보내기. - 모든 GraphQL 쿼리는 동일 주소로 POST 된다. query FetchBlogs.. 2021. 3. 8. 이전 1 다음
