apollo-create-update-write-cashe.js

// apollo, read cahe, refetch query, update cashe


import { useApolloClient, gql } from '@apollo/client';

//вычитываем из кеша квери:
const client = useApolloClient();
const cache = client.cache;

const getMeCashe = cache.readQuery({
  query: gql`
      query GetMe {
        me {
          id
        }
      }
    `,
});

console.log(getMeCashe.me.id);



// перезапись кеша после мутации:

// пример 1
import { useMutation } from "@apollo/client";
import { successNotification } from "../../../result";

const useMutationStandUploadFile = (mutation, dataQuery) => {


  const [ _setMutationStandUploadFile, { loading: loadingMutationStandUploadFile } ] = useMutation(mutation,
    {
      update(cache, { data }) {
        const {
          attachedUpload: {
            label,
            message,
            attachment
          }
        } = data;

        cache.modify({
          id: cache.identify(dataQuery),
          fields: {
            attachment() {
              return attachment;
            },
          },
        });


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


  return {
    _setMutationStandUploadFile,
    loadingMutationStandUploadFile,
  }
};

export default useMutationStandUploadFile;


// пример 2
import { useMutation, gql } from "@apollo/client";
import { successNotification } from "../../../../result";


const useMutationUploadAvatar = (mutation, getUser) => {

  const [ _setMutationVariableUpload,
    { loading: loadingMutationUpload,
      error: errorMutationUpload,
      data } ] = useMutation(mutation,
        {
          update(cache, { data }) {

            const {
              userUploadAvatar: {
                label,
                message,
                avatar
              }
            } = data;

            const userAvatarFragment = gql`
              fragment UserAvatar on User {
                avatar
              }
            `;

            cache.writeFragment({
              id: cache.identify(getUser),
              fragment: userAvatarFragment,
              data: {
                avatar: avatar
              }
            });


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


  return {
    _setMutationVariableUpload,
    loadingMutationUpload,
    errorMutationUpload,
    dataMutationUpload: data && data.nameMutatiom
  }
};

export default useMutationUploadAvatar;




// пример 3
import { useMutation, gql } from "@apollo/client";
import { successNotification } from "../../../../result";
// import { GET_USER } from './../../../../../graphql/query/user-gql';

const useMutationUpdateUser = (mutation, /*getUser*/) => {


  const [ _setMutationVariableUpdate,
    { loading: loadingMutationUpdate,
      error: errorMutationUpdate, data } ] = useMutation(mutation,
        {
          update(cache, { data }) {
            const {
              userUpdate: {
                label,
                message,
                user: {
                  name,
                  email_original,
                  role,
                  surname,
                  locale,
                  status
                }
              }
            } = data;


            const userDataFragment = gql`
              fragment UserData on User {
                name,
                email_original,
                role,
                surname,
                locale,
                status
              }
            `;

            cache.writeFragment({
              id: cache.identify(getUser),
              fragment: userDataFragment,
              data: {
                name,
                email_original,
                role,
                surname,
                locale,
                status
              }
            });

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


  return {
    _setMutationVariableUpdate,
    loadingMutationUpdate,
    errorMutationUpdate,
    dataMutationUpdate: data && data.nameMutatiom
  }
};

export default useMutationUpdateUser;



// перезапрос квери после мутации:

import { useMutation } from "@apollo/client";
import { successNotification } from "../../../../result";
import { GET_USER } from './../../../../../graphql/query/user-gql';

const useMutationMetaUpload = (mutation, getUser) => {

  const [ _setMutationVariableUpload,
    { loading: loadingMutation,
      error: errorMutation, data } ] = useMutation(mutation,
        {
          update(_, { data }) {
            const {
              userMetaUpload: {
                label,
                message
              }
            } = data;

            successNotification({
              title: label.toUpperCase(),
              description: message
            });
          },
          refetchQueries: [
            {
              query: GET_USER,
              variables: { userAdmId: getUser.id },
            },
          ]
        });

  return {
    _setMutationVariableUpload,
    loadingMutation,
    errorMutation,
    dataMutation: data && data.nameMutatiom
  }
};

export default useMutationMetaUpload;

//обновление квери после мутации

import { useMutation } from "@apollo/client";
import { GET_TAXONOMY } from "../../../../graphql/query/taxonomies-gql";
import { successNotification } from "../../../result";


const useMutationTermCreate = (mutation, dataQuery) => {

  const [ _setMutationTermCreate,
    { loading } ] = useMutation(mutation,
      {
        update(cache, { data }) {
          const {
            taxonomyTermCreateOrUpdate: {
              label,
              message,
              taxonomy_term
            }
          } = data;


          //способ 1
          const { taxonomy } = cache.readQuery({
            query: GET_TAXONOMY,
            variables: {
              id: dataQuery.id
            },
          })


          cache.writeQuery({
            query: GET_TAXONOMY,
            variables: {
              id: dataQuery.id
            },
            data: {
              taxonomy: {
                taxonomy_terms: [
                  taxonomy_term,
                  ...taxonomy.taxonomy_terms
                ],
                __typename: taxonomy.__typename
              }
            }
          })
          // конец способ 1

          //способ 2 без вычитывания квери если данные известны
          cache.writeQuery({
            query: GET_TAXONOMY,
            variables: {
              id: dataQuery.id
            },
            data: {
              taxonomy: {
                taxonomy_terms: [
                  taxonomy_term,
                  ...dataQuery.taxonomy_terms
                ],
                __typename: dataQuery.__typename
              }
            }
          })
          //конец способ 2


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


  return {
    _setMutationTermCreate,
    loadingMutationTermCreate: loading,
  }
};

export default useMutationTermCreate;

// удаление и перечитывание кеша квери
import { useMutation } from "@apollo/client";
import { successNotification } from "../../../result";
import { GET_TAXONOMY } from "../../../../graphql/query/taxonomies-gql";



const useMutationTermDelete = (mutation, dataQuery) => {

  dataQuery = dataQuery && dataQuery

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

          const {
            taxonomyTermDelete: {
              //id,
              label,
              message
            }
          } = data;


          ////способ 1
          const filteredArr = dataQuery.taxonomy_terms.filter(
            (item) => item.id !== dataQuery.taxonomy_terms.id
          )


          cache.writeQuery({
            query: GET_TAXONOMY,
            variables: {
              id: dataQuery.id
            },
            data: {
              taxonomy: {
                taxonomy_terms: [
                  ...filteredArr
                ],
                __typename: dataQuery.__typename
              }
            }
          })
          //////

          ////способ 2
          cache.evict({
            id: cache.identify({id, __typename: "Translation"})
          });
          cache.gc();
        ////


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

  return {
    _setMutationTermDelete,
    loadingTermDelete: loading,
  }
};

export default useMutationTermDelete;


//удаление из кеша
cache.evict({
  id: cache.identify(metaFields.find(field => field.meta_key === variables.input.meta_key))
});
cache.gc();