프론트엔드/GraphQL5 [GraphQL] 5. fragment Fragment - 여러 쿼리에 사용될 수 있는, 재사용 가능한 필드셋 - 중복을 줄임으로써 전체 코드 간소화 Usage - 재사용되는 요소들 fragment로 분리 const Names = gql` fragment names on People { first_name last_name } `; const HealthInfo = gql` fragment healthInfo on People { sex blood_type } `; const WorkInfo = gql` fragment workInfo on People { serve_years role team } `; - 쿼리 적용 const GET_PEOPLE = gql` query GetPeople { people { id ...names ...heal.. 2023. 2. 16. [GraphQL] 4. local only field 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. 목표 Apollo client로 local state를 어떻게 다루는지 이해하기 API에서 제공되는 remote data와 local state를 병합하기 local only field Apollo의 cache에서만 활동하고, API로 가지 않는 field Apollo는 local only field를 제외한 모든 field의 정보를 API에 요청한다. 활용 사례 다크모드 사용자의 타임존 사용자가 원하는 볼륨 크기를 User Profile에 저장 (ex. youtube) 선언 방법 @client Apollo에게 이 field는 cache에만 있다고 알려준다. const GET_MOVIE = gql` query getMov.. 2023. 2. 15. [GraphQL] 3. useQuery 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. 장점 GraphQL의 useQuery hook을 사용하면 선언형으로 코드를 작성할 수 있다. 선언형 코드 : 원하는 걸 설명하기 위한 코드만을 적는다 명령형 코드 : 모든 단계의 코드를 적는다. 명령형 - 쿼리 요청을 보내고 -> state에 저장한다 function Movies() { const [movies, setMovies] = useState([]); const client = useApolloClient(); useEffect(() => { client .query({ query: gql` { allMovies { title id } } `, }) .then((result) => setMovies(result... 2023. 2. 15. [GraphQL] 2. Apollo client 생성 노마드 코더의 [GraphQL로 영화 웹 앱 만들기] 강의를 보고 정리한 글입니다. Client 생성 - url는 GraphQL 서버 주소를 기입하면 된다. // src/apollo.ts import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: "http://localhost:4000/", cache: new InMemoryCache(), }); export default client; 쿼리 작성 // src/apollo.ts import { ApolloClient, gql, InMemoryCache } from "@apollo/client"; client .query({ query.. 2023. 2. 15. 이전 1 2 다음
