[ React/Apollo ] Apollo Client로, 페이지 실시간 업데이트 하기

GraphQL / Apollo Client란?

[Node.js] GraphQL, Apollo 란? / 사용법 ( GraphQL 서버 만들기 )

 

-- 이 게시글은 GraphQL과 Apollo Client에 대해 알고 있는 사람을 대상으로 작성했습니다. --

---

Apollo Cache란?

GraphQL 서버와 통신하지 않고도 React 페이지에서 직접 데이터를 읽고 쓸수 있도록 하는 것

예전에 이미 사용한 정보와, 사용자의 컴퓨터의 정보를 이용할 수 있다.

 

Apollo Cache 구조

// Comment라는 데이터베이스 테이블의 내용을 저장하고 있다. 

Comment:2
  createAt: "1612769292266"
  id: 2
  isMine: true
  comment: "I love this"
  user:
    {
      "__typename": "User",
      "username": "jinho",
      "avatar": "https://asbsdfadf.jpeg"
    }

 

---

Apollo Cache 서버에 적용하기

 

0. Apollo Server 만들기

// apollo.js

import { ApolloClient } from '@apollo/client';

// 아폴로 서버와 React를 연결하기 위한 ApolloClient 가져오기

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: "http://localhost:4000/graphql"
});

// ApolloClient로 ApolloServer 감지하기
// InMemoryCache로 임시메모리 사용하기

export default client;
// 다른 파일에서 사용할수있게 내보내주기

 

// index.js

import client from "apollo.js"

// 아까 만든 ApolloClient 가져오기

import { ApolloProvider } from '@apollo/client';

// React에서 Apollo Server를 다루기 위한 ApolloProvider 가져오기

ReactDOM.render(
  <ApolloProvider client={client}>
    <MyRootComponent />
  </ApolloProvider>,
  document.getElementById('root'),
);

// ApolloProvider로 모든 내용에 client를 할당해, React로 아폴로 서버를 다룰수 있게 해준다.

 

Apollo Cache의 사용방식

1. GraphQL 쿼리

GraphQL 쿼리를 이용해, cache에 저장된 정보를 수정할 수 있다.

- 캐시에서 GraphQL 쿼리 사용


2. Fragment

전체 쿼리를 작성하지 않고, 이전에 불러온 필드 값 만을 수정할 수 있다.


3. Modify

GrqphQL을 전혀 사용하지 않고,

캐시된 ( 임시 저장된 ) 데이터를 직접 수정하거나, 필드를 완전히 삭제할 수 있다.

 

---

1. GraphQL 쿼리 사용

 

readQuery 사용 ( 캐시 데이터 읽어오기 )

import client from "./server.js"

// 아폴로 서버에서 클라이언트 불러오기

const READ_TODO = gql`
  query ReadTodo($id: ID!) {
    todo(id: $id) {
      id
      text
      completed
    }
  }
`;

// GraphQL Query 사용해서 todo를 가져온다.


const { todo } = client.readQuery({
  query: READ_TODO,
  variables: { // 쿼리에 사용할 변수를 입력해준다.
    id: 5,
  },
});

// id가 5인, to-do 임시정보(cache)를 가져오는(fetch) 기능.

// 읽어온 데이터 내용

{
  todo: {
    __typename: 'Todo', // __typename 이 자동으로 포함된다.
    id: 5,
    text: 'Buy oranges 🍊',
    completed: true
  }
}

 

writeQuery 사용 ( 캐시에 데이터 쓰기 )

import client from "./server.js"

// 아폴로 서버연결하기 위한 client 불러오기

client.writeQuery({
  query: gql`
    query WriteTodo($id: Int!) {
      todo(id: $id) {
        id
        text
        completed
      }
    }`, // todo 작성하기 위한 쿼리 작성
    
  data: { 
    todo: {
      __typename: 'Todo',
      id: 5,
      text: 'Buy grapes 🍇',
      completed: false
    },
  }, // 작성될 내용 작성
  
  variables: {
    id: 5
  } // 쿼리에 전달할 변수 작성
});

// 전 내용
{
  'Todo:5': {
    __typename: 'Todo',
    id: 5,
    text: 'Buy oranges 🍊',
    completed: true
  }
}

// 후 내용
{ 
  'Todo:5': {
    __typename: 'Todo',
    id: 5,
    text: 'Buy grapes 🍇',
    completed: false,
    dueDate: '2022-07-02'
  }
}

 

주로 사용하는 방식

백엔드에서 만든 GraphQL 쿼리의 모든 내용을

cache 저장소에서, 읽어 오고 싶을때 ( readFragment )

cache 저장소에, 새로 만들고 싶을 때 ( writeFragment )

---

2. GraphQL Fragment 사용

 

readFragment 사용

// 이전에 사용한 기록이 있는 todo 객체의, 원하는 부분만 따로 가져오기 

const todo = client.readFragment({
  id: 'Todo:5', // todo 객체를 구별할 수 있는 고유한 값 ( 앞 첫글자가 무조건 대문자로 바뀐다 )
  fragment: gql`
    fragment MyTodo on Todo {
      id
      text
      completed
    }
  `,
});

 

writeFragment 사용 ( 새로운 todo 객체 만들기 )

client.writeFragment({
  id: 'Todo:5',
  fragment: gql`
    fragment MyTodo on Todo {
      id
      text
      completed
    }
  `,
  data: {
    id: 1,
    text: "test",
    completed: true,
  },
});

 

주로 사용하는 방식

백엔드에서 만든 객체의 형식과 완전히 똑같은 객체를 ,

cache 저장소에서, 읽어 오고 싶을때 ( readFragment )

cache 저장소에, 새로 만들고 싶을 때 ( writeFragment )

 

---

3. 캐시된 필드를 직접 수정

 

cache.modify 사용 ( 캐시에 데이터 사용자가 원하는 방식으로 데이터 수정 )

// Todo:5의 completed 요소만 true로 바꾼다

cache.modify({
  id: 'Todo:5',
  fields: {
    completed {
      return true
    },
  },
});

 

주로 사용하는 방식

백엔드에서 만든 객체의 형식과 상관없이, 자신이 원하는 형식의 객체를

cache 저장소에, 새로 만들고 싶을 때 ( modify )