apollo-graphql-cache.js

// РАБОТА с кешем аполло:

// "apollo-boost": "^0.4.4",
// "apollo-cache-inmemory": "^1.6.3",
// "apollo-client": "^2.6.4",
// "apollo-link-context": "^1.0.19",
// "apollo-link-http": "^1.5.16",
// "apollo-upload-client": "^11.0.0",
// "graphql": "^14.5.7",


// Чтение данных на клиенте из кеша:

import { useApolloClient } from "@apollo/client";

const GET_MY_FIELD = gql`
    query GetMe {
        me @client{
            id
            name
            nickname
            initials
            locale
            role
        }
    }`;

const client = useApolloClient();
const { me } = client.readQuery({ query: GET_MY_FIELD });



// Чтение запись кеша после мутации:
// Все это нужно делать в мутации для того что бы немедленно перерендерить компонент с актуальными данными,
// иначе после мутации компонент никак не измениться и обновить его можно будет только перезагрузкой страницы


import React from "react";
import { useMutation } from "@apollo/react-hooks";
import { Button } from "antd";

import { DELETE_COMMENT, GET_POST_COMMENTS } from "../comments-gql";

import { errorNotification, successNotification } from "../../result";
import Icons from "../../icons";

import "./comment-delete-button.css";


const CommentDeleteButton = ({ id, postId }) => {

  const [ onDeleteClick, { loading } ] = useMutation(DELETE_COMMENT, {
    update: (cache, { data: { deleteComment } }) => {

      // const {label, message} = deleteComment;

      const { post } = cache.readQuery({
        query: GET_POST_COMMENTS,
        variables: {
          post_id: postId,
        }
      });

      const {
        comments: {
          pageInfo,
          edges,
          __typename
        }
      } = post;

      const newEdges = edges.filter(({ node }) => node.id !== id);

      cache.writeQuery({
        query: GET_POST_COMMENTS,
        variables: {
          post_id: postId
        },
        data: {
          post: {
            ...post,
            comments: {
              pageInfo: {
                ...pageInfo,
                total: pageInfo.total - 1
              },
              edges: newEdges,
              __typename
            }
          }
        },
      });

      successNotification({
        title: "Comment successfully deleted",
        // description: message,
      });
    }
  });

  const onClickDelete = () => {
    if (!loading)
    {

      onDeleteClick({
        variables: {
          id: id,
        }
      }).catch((error) => {
        errorNotification(error);
      });
    }
  };


  return (
    <Button
      className="comment-delete-button"
      onClick={ onClickDelete }

    >
      <Icons.Trash loading={ loading } />
    </Button>
  );
};

export default CommentDeleteButton;


//пример 2 перезапись кеша при помощи cache.readQuery - cache.writeQuery

const useMutationPostDelete = (mutation, query, queryVariables, idPost = false) => {


  const [ _setMutationPostDelete,
    { loading, error } ] = useMutation(mutation, {
        update(cache, { data }) {

          const {
            postDelete: {
              label,
              message
            }
          } = data;


          const caсhePosts = cache.readQuery({ query, variables: { ...queryVariables } });

          const filteredArr = caсhePosts.posts.data.filter(
            (item) => item.id !== idPost
          );


          cache.writeQuery({
            query,
            variables: { ...queryVariables },
            data: {
              posts: {
                data: [
                  ...filteredArr
                ],
                __typename: "PostPaginator"
              }
            }
          })

          successNotification({
            title: label.toUpperCase(),
            description: message
          });
        },
      });

  return {
    _setMutationPostDelete,
    loadingPosttDelete: loading,
    errorMutationPostDelete: error,
  }
};

export default useMutationPostDelete;


//пример 3 перезапись кеша при помощи refetchQueries

const useMutationPostDelete = (mutation, query, queryVariables) => {


  const [ _setMutationPostDelete,
    { loading, error } ] = useMutation(mutation, {
      update(cache, { data }) {

        const {
          postDelete: {
            label,
            message
          }
        } = data;

        successNotification({
          title: label.toUpperCase(),
          description: message
        });
      },
      refetchQueries: [
        {
          query,
          variables: { ...queryVariables },
        },
      ]
    });

  return {
    _setMutationPostDelete,
    loadingPosttDelete: loading,
    errorMutationPostDelete: error,
  }
};

export default useMutationPostDelete;