# apollo
GraphQL React + Apollo Tutorial - 3. Query: 링크 불러오기
서버로부터 데이터를 불러오고 데이터를 React 컴포넌트에 표시하는 방법을 익힙니다. Apollo 클라이언트를 사용하여 GraphQL 쿼리를 다룹니다.
Get started 'react-apollo'
REST API와 Redux를 대체하는 GraphQL과 Apllographql을 기반으로 한 상태관리 플랫폼. 클라이언트에서 graphql을 사용해 데이터를 가져오는 UI를 만들 때 사용하기 좋다.@apollo/react-hooks로 더 간편하게 사용할 수 있다. =>
GraphQL React + Apollo Tutorial - 2. 시작하기
Hackernews 클론 프로젝트를 시작합니다. `create-react-app`을 사용하여 프론트엔드를 제작하고, Prisma를 사용하여 백엔드를 제작합니다.
GraphQL React + Apollo Tutorial - 1. Introduction
Apollo Client는 프론트엔드에서 GraphQL을 아주 간단하게 시작할 수 있도록 도와주는 유연하면서도 강력하고 직관적인 API를 제공합니다.
Apollo 서버로 GraphQL API 개발하기 (3)
이번에는 로그인/회원가입 기능을 구현해볼 것이다. 본 글에서 설명하는 내용은 개인적으로 공부하면서 생각한 것으로 검증되지 않았습니다. 따라서 이 방식을 다른 프로젝트에 그대로 도입하면 보안상 문제가 생길 수도 있으니 주의하시길 바랍니다. 보안은 저도 잘 모릅니다..ㅜㅜ
Apollo 서버로 GraphQL API 개발하기 (2)
서버 구축 등 기초적인 내용은 1편에서 다뤄봤고, 2편에선 서버를 커스터마이즈하는 과정에 대해 다뤄볼 것이다. 7. 새로운 데이터베이스 추가 데이터베이스에 사용자 목록을 추가하고 싶으면, 아래와 같이 한다. > 1. 데이터베이스 생성 스키마에 데이터베이스 구조 명시
Apollo 클라이언트로 React 프론트 개발하기 (1)
Apollo Client(React) 공식 문서 : https://www.apollographql.com/docs/react/get-started/ 0. 사전 설치 Node.js Yarn (선택) Visual Studio Code (선택) 1. Apollo 클라
Apollo 서버로 GraphQL API 개발하기 (1)
GraphQL이란 GraphQL은 데이터베이스 쿼리 언어 중 하나이다. 개인적으로 쿼리문 작성이 직관적인 것이
Apollo-boost to Apollo-client, websocket
참고:https://stackoverflow.com/questions/59359280/react-app-error-failed-to-construct-websocket-an-insecure-websocket-connecti https://www.apollographql.com/docs/tutorial/local-state/ https://blog.has...
React infinit scroll 적용시키기
오늘은 리스트를 받아오고 스크롤을 내릴때 로딩 스크롤이 나올수 있는 기능을 넣어보았다. 가장먼저 생각 한것, 쿼리문을 어떻게 수정해야할까. 최소한으로 필요한 사항은 한번에 몇개의 데이터를 가져올것인지. 그리고 게시판으로 생각하면 내가 어떤 페이지의 정보를 가져왔는지 이다. 구글링을 해 보았을때, 기본적 REST API 서버에서 가져올때 https://r...
apollo client 버그 대잔치
graphql 을 사용하면서 react client에서 어떻게 전역 상태관리를 할 것인지, 그리고 graphql요청은 어떤 방식으로 보낼지에 대한 고민의 답으로 apollo client를 사용하고 있다. 쿼리의 캐싱으로 상태관리를 어느정도 해결해주고, 쿼리 이외의 필요한 값들은 직접적으로 캐싱이 가능하다. 또 custom hook과 codegen으로 쿼리...
blog - useQuery & useMutation
Backend에서 구성한 query와 mutation을 react에서 사용하는 방식은 크게 두 가지이다. 1. Query, Mutation 태그 이용 2. useQuery, useMutation Hook 이용 2번은 apollo/react-hook에서 제공하는 custom hook인데, 나는 이 프로젝트에서 hook을 적극적으로 활용할 것을 하나의 주안점...
blog - apollo server configuration
Blog 프로젝트에서는 graphql을 이용해 backend를 구축하기로 결정했고, 구체적으로는 apollo에서 지원하는 apollo-server를 이용하였다. 기존의 axios 등을 활용하는 restful API 방식에서는 요청을 보낼 때마다 원하는 request 헤더를 자유롭게 실어줄 수 있었는데, graphql을 이용할 때는 request header...
[TIL] Apollo
🧨 Apollo Apollo는 Client, Sever 라이브러리, 캐싱 및 쿼리 분석도구를 제공 REST API는 Redux를 대체하는 GraphQL / Apollo graphql을 기반으로 한 상태관리 플랫폼. 클라이언트에서 graphql을 사용하여 데이터를 가져오는 UI를 만들 때 사용하기 좋다. > - apollo-boost : Apollo...
How to GraphQL - 10. Common Questions
GraphQL의 서버 사이드 캐싱, 인증, 권한, 오류 처리, 오프라인 사용 등에 대한 공통 질문에 대한 해답을 알아봅니다.
How to GraphQL - 9. Security
GraphQL의 다양한 보안 측면 및 전략에 대하여 알아봅니다. 시간 제한, 최대 쿼리 깊이, 쿼리 복잡도, 쓰로틀링에 대하여 알아봅니다.
How to GraphQL - 8. Tooling and Ecosystem
GraphQL 생태계에 대하여 알아보고, GraphiQL Playground, Introspection을 통하여 자동 생성되는 문서와 같은 관련 도구에 대하여 배웁니다.
How to GraphQL - 7. More GraphQL Concepts
Fragment, 쿼리 인자, Alias, 인터페이스, 그 이외의 SDL 기능과 같은 GraphQL의 심화 개념에 대하여 알아봅니다.
How to GraphQL - 6. Server
GraphQL 서버의 주요 개념에 대하여 배우고, 리졸버 함수를 사용하여 GraphQL 쿼리를 실행하는 법과 여러 요청을 일괄 처리하는 법을 알아봅니다.