Programming/GraphQL

PostGraphile 이란?

Apollo Studio 란? Apollo를 이용해서, Apollo Server와 Apollo Client를 쉽게 연결하고, ( GraphQL + Apollo + Frontend ) 여러가지 추가 기능을 제공한다. Apollo Studio의 기능 Apollo Server에서 실행했던 명령어들 ( Query, Mutation )의 기록을 확인할 수 있다. 추후 추가 Apollo Studio 사용 방법 1. 회원 가입하기 Apollo Studio Studio is a hub for creating, evolving, and consuming your graph for all members of your team. studio.apollographql.com 2. 새로운 그래프 만들기 New Graph를 눌러..

apollo parent란? 특정 resolver를 호출한 부모 resolver의 데이터 ( resolver가 resolver를 호출하는 경우에 사용합니다. ) ( 불러온 정보와 연관된 또 다른 정보를 불어와야 하는 경우 // GraphQL - 유저 정보 타입 지정 const typeDefs = { type User { id: Int! username: String! password: String! isfollowing: Boolean } } // Resolver - user가, isfollowing을 호출 { User: { isfollowing: (parent) => { console.log(parent) return true } } } // parent는 첫번째 인자로 전달됩니다!

context란? apollo server의 resolver에서 전역적으로 사용가능한 변수 apollo server에 context 추가하기 // 아폴로 서버에 context 추가, req 받아서 header 정보 사용하기 const server = new ApolloServer({ typeDefs, resolvers, context: ({ req }) => ({ authScope: req.headers.authorization }) })); // resolver에서 context 사용하기 ( 3번째 인자로 전달됨 ) (parent, args, context, info) => { if(context.authScope !== ADMIN) throw new AuthenticationError('not adm..

useMutation 사용예시 // mutation.js 파일에서 Mutation 불러오기 import { EXEAMPLE_MUTATION } from 'mutation' // Mutation 사용할 수 있도록 작업 const [execute, { loading }] = useMutation(EXEAMPLE_MUTATION, { onCompleted, }); // 렌더링 후, 조건부로 Mutation 실행 return ( execute } value="홈" /> ); 옵션 이름 기능 사용방식 variables 여러개의 변수를 전달 할 수 있다. variables: { 키 값 [ 문자열 ] : 벨류 값 } onComplete 오류 없이 작동을 마친후, 실행할 함수를 정할 수 있다. onComplete: (..

Apollo Client 란? GraphQL와, 클라이언트를 연결해주는 Node.js 패키지 프론트엔드에서 다뤄지는 여러가지 데이터를 graphql을 사용해 DB에서 가져올 수 있도록 해준다. Apollo Client 사용법 GraphQL & Apollo Client 설치 npm i graphql @apollo/client javascript에서 GraphQL 가져오기 // React 프로젝트 내부 .js 파일 import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from "@apollo/client"; // ApolloClient 불러오기 // uri안에 GraphQL 서버 주소 넣기 // GraphQL 쿼리 결과를 저장하는데 사용..

해당 정보가 유니크한 것이라는 것을 구분할 수 있어야만, 이를 Cache에 저장할 수 있다. ( 기본 : id ) 1. 기본으로 사용되는 방법 ex ) 1번째 사용자의 이름을 불러옴 // 쿼리 user { id username } // 캐시 User : 1 { id: 1 username: "jinho" } ex) 1번째 사용자의 사진을 불러옴 // 쿼리 user { id photo } // 캐시 User : 1 { id: 1 username: "jinho" photo: "http://photo.img" } // Apollo가, id를 비교하여 기존의 정보에 새로운 정보를 자동으로 추가해준다. 2. 새로운 식별자 만들기 ( 정보의 유니크함을 구별해주는 정보 사용 ) Apollo Client에 식별자 추가하..

React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹 사이트 / 앱의 화면(UI)을 만들어주는 Node.js 패키지 (페북이 만듬) React 탄생 배경 요즘 웹사이트는, 규모가 커질때로 커지고, 사용자가 직접 컨트롤 할 수 있는 부분이 많아지고 있다. defineall.tistory.com GraphQL이란? [Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 ) GraphQL 이란? ( GraphQL API ) 브라우저와 서버가, Query, Mutation, TypeDefs, resolvers를 사용해 CRUD 요청, 응답을 주고받는 방식 GraphQL의 필요성 기존 서비스는 보유한..

apollo-tooling이란? GraphQL서버에서 만든 쿼리와 뮤테이션을, Typescript에서 활용하려면 사용할 여러가지 변수에 타입을 다시 지정해주어야 한다. apollo-tooling을 사용하면, 코드, tsx, 리액트 컴포넌트로 가서 쿼리와 뮤테이션을 찾고, 자동으로 인터페이스(타입)를 만들 수 있다. apollo-tooling의 필요성 API(스키마)에 있는 모든 것을 위해 타입스크립트 타입을 만든다. (변수, 리턴타입 등) Apollo를 콘솔에서 부를 수 있게 할 수 있다. GraphQL에 작성되어 있는 타입을 그대로 옮겨오면, typescript로 이루어진 프론트에서 타입을 재작성 해야하는 번거로움을 줄일 수 있다! apollo-tooling 설치하기 npm i -g apollo ap..