apollo 공식 문서를 번역하였습니다.

Using GraphQL queries

• readQuery
• 직접 반환된 object를 수정하면 안된다.
• writeQuery를 써라.
• 만약 원하는 데이터가 local에 없다면 null을 반환할 것이다.
• 그리고 server로 따로 요청을 보내지는 않을 것이다.

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

// Fetch the cached to-do item with ID 5
const { todo } = client.readQuery({
  query: READ_TODO,
  variables: { // Provide any required variables here
    id: 5,
  },
});

• writeQuery
• readQuery와 거의 흡사하지만, data option이 있다는 게 다르다.

client.writeQuery({
  query: gql`
    query WriteTodo($id: Int!) {
      todo(id: $id) {
        id
        text
        completed
      }
    }`,
  data: { // Contains the data to write
    todo: {
      __typename: 'Todo',
      id: 5,
      text: 'Buy grapes 🍇',
      completed: false
    },
  },
  variables: {
    id: 5
  }
});

Using GraphQL fragments

• complete valid query를 요구하는 방식이다.
• graphQL queris와 다르게 id option을 요구한다.
• 이때의 id는 cache id 이다.
• readFragment

Copy
const todo = client.readFragment({
  id: 'Todo:5', // The value of the to-do item's cache ID
  fragment: gql`
    fragment MyTodo on Todo {
      id
      text
      completed
    }
  `,
});

• writeFragment
• 해당 id의 일부 데이터만도 수정이 가능하다.
• subscribe 하고 있는 컴포넌트가 있다면 rerendering 된다.

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

Using cache.modify

• writeQuery 나 writeFragment처럼 modify도 subscription들을 trigger 할 수 있다.
• 네가 broadcast:false를 안 붙인다면..
• 앞의 두 쿼리와 다르게 이미 조내하지 않는 데이터를 새로 쓸 수는 없다.
• ID를 찾기 위해 cache.identify를 쓸 것을 추천.

cache.modify({
  id: cache.identify(myObject),
  fields: {
   	/*name 필드의 값을 모두 대문자로 바꾸는 코드*/ 
    name(cachedName) {
      return cachedName.toUpperCase();
    },
  },
  /* broadcast: false // Include this to prevent automatic query refresh */
});

// readField를 사용하는 방법
const idToRemove = 'abc123';

cache.modify({
  id: cache.identify(myPost),
  fields: {
    comments(existingCommentRefs, { readField }) {
      return existingCommentRefs.filter(
        commentRef => idToRemove !== readField('id', commentRef)
      );
    },
  },
});

const newComment = {
  __typename: 'Comment',
  id: 'abc123',
  text: 'Great blog post!',
};

cache.modify({
  id: cache.identify(myPost),
  fields: {
    comments(existingCommentRefs = [], { readField }) {
      const newCommentRef = cache.writeFragment({
        data: newComment,
        fragment: gql`
          fragment NewComment on Comment {
            id
            text
          }
        `
      });

      // Quick safety check - if the new comment is already
      // present in the cache, we don't need to add it again.
      if (existingCommentRefs.some(
        ref => readField('id', ref) === newComment.id
      )) {
        return existingCommentRefs;
      }

      return [...existingCommentRefs, newCommentRef];
    }
  }
});

// useMutation 할 때 cache 어떻게 업데이트 하는지!!
const [addComment] = useMutation(ADD_COMMENT, {
  update(cache, { data: { addComment } }) {
    cache.modify({
      id: cache.identify(myPost),
      fields: {
        comments(existingCommentRefs = [], { readField }) {
          const newCommentRef = cache.writeFragment({
            data: addComment,
            fragment: gql`
              fragment NewComment on Comment {
                id
                text
              }
            `
          });
          return [...existingCommentRefs, newCommentRef];
        }
      }
    });
  }
});

cache.modify({
  id: cache.identify(myPost),
  fields: {
    comments(existingCommentRefs, { DELETE }) {
      return DELETE;
    },
  },
});

cache.modify({
  id: cache.identify(myPost),
  fields: {
    comments(existingCommentRefs, { INVALIDATE }) {
      return INVALIDATE;
    },
  },
});