graphql
-
#1.2 오프라인 아폴로 설정GraphQL로 오프라인 노트 앱 만들기 2020. 1. 12. 22:54
아폴로 부스트로 하면 자동으로 셋업해주지만 지금의 프로젝트같은 경우는 제대로 동작하지 않을것이다 왜냐면 오프라인 즉 로컬로만 작업을 하기때문인데, 아폴로부스트는 http링크 같은걸 설정해줘야해서, 우리는 수동으로 코드를 써줬다. - index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { ApolloProvider } from "react-apollo"; import client from "./apollo"; import "./globalStyles"; ReactDOM.render( , document.getElementById("root") ); - clientState.js..
-
설정GraphQL로 오프라인 노트 앱 만들기 2020. 1. 12. 22:38
npx create-react-app [프로젝트 명] 깃헙 push.. 설정 아폴로-부스트는 여기서 쓰이지 않을 예정. -> http쪽을 만져야하는게 많아서. 여기선 로컬로만 작업 할 예정이라서. yarn add apollo-cache-inmemory apollo-client apollo-link graphql react-apollo styled-components styled-reset apollo-link-state react-apollo react-router-dom react-markdown-renderer react-textarea-autosize graphql-tag globalStyled.js 파일 Components폴더 Routes폴더 생성
-
graphQL 설치 및 깃허브 푸쉬GraphQL 2019. 12. 9. 21:17
npx 리액트 설치후, 그 파일의 폴더로 이동후,(cd 폴더명) 깃허브에서 레포지터리 생성후 (README.md 생성 안했음) cmd에 다음과 같이 입력 git init git remote add origin [깃허브주소] git pull origin git add . git commit -m "Initiail commit" git push origin master code . 이후 add 할것들 yarn add react-router-dom yarn add react-router-dom apollo-boost @apollo/react-hooks graphql yarn add react-apollo@2.5 (예전버전으로 사용) Apollo Boost : GraphQL을 위한 클라이언트
-
GraphQL로 REST API 감싸는 법카테고리 없음 2019. 12. 7. 20:12
REST API란? Representational State Transfer의 약자로.. 자세한건 클릭 yarn add node-fetch - Node.js에서 fetch를 할 때 필요 참조 GraphQL로 REST API 감싸기 세번째 사진인 db.js를 눈여겨 봐야한다. fetch를 활용해서 url를 이용해서 GraphQL로 REST API를 감싸주었다. 오래된 서버를 갖고있거나,GraphQL을 넣을 수 없다면 이런식으로 하면 된다. GraphQL로 REST API 감싸기(limt,rating 추가하는법) db.js코드 import fetch from "node-fetch"; const API_URL = "https://yts.am/api/v2/list_movies.json?"; export cons..
-
스키마 활용 예시(Mutation)GraphQL 2019. 12. 7. 18:53
playground란? graphql-yogo에 따라오는건데, 내 데이터베이스를 테스트하게 해주는것 yarn start후에 localhost:4000로 접속하면 볼수있는 화면이고 여기서 api를 테스트 해볼수있다. GraphQL Resolvers GraphQL Resolvers는 GraphQL 서버에서 요청을 받음 GraphQL 서버가 Query나 Mutation(설명)의 정의를 발견하면 resolvers.js를 찾을것이고, 해당 함수를 실행함 여기선 db.js파일을 따로 생성해,데이터를 따로 빼놓음 db.js 코드 구조 let movies = [ { id: "0", name: "Star Wars - The new one", score: 1 }, { id: "1", name: "Avengers - The..
-
GraphQL 특징,서버만들기,스키마..GraphQL 2019. 12. 5. 22:14
GraphQL로 해결 할 수 있는 문제 Over-fetching - 내가 요청한 영역의 정보보다, 많은 정보를 서버에서 받는 경우를 뜻함 Under-fetching - REST에서 하나를 완성하려고 많은 소스를 요청하는거 - 예) 인스타그램 클론 앱에선 알림,유저정보,피드 정보들을 3번씩 주고받야아 실행됨 GraphQL 특징 URL이 존재하지 않음 /feed , /notifications/, /user/1/ -> 이 모든 경로를 하나의 쿼리로 만들 수 있음 GrapQL로 서버 만들기 yarn add graphql-yoga yarn global add nodemon nodemon. 내가 파일을 수정할 때마다 서버를 재시작해줌 yarn add babel-cli --ignore-engines import { ..