[graphQL] useMutaion

useQuery 는 data fetching만 가능함
쓰기,업데이트 는 useMutaion

설치

$ import {useQuery, gql, useMutation} from '@apollo/client';

쿼리문 작성

const DELETE_TEAM = gql`
  mutation DeleteTeam1($id: ID!) // $id 는 null 이 될수없게?
    deleteTeam(id: $id) { // id를 인자로받는다
      id
    }
  }
`

mutaion 쿼리문

useMutaion 사용

const [deleteTeam] = useMutation(
  DELETE_TEAM, { onCompleted: deleteTeamCompleted })

useMutaion(쿼리, {});
delteTeam 이라는 resolver 함수를 받아옴

  deleteTeam({variables: {id: contentId}}) // deleteTeam 으로 contentId 상태값 넘김

변수를 넘겨줌 id는 선택된 상태의 id

const { gql } = require('apollo-server')
const dbWorks = require('../dbWorks.js')

const typeDefs = gql`
    type Team {
        id: ID!
        manager: String!
        office: String
        extension_number: String
        mascot: String,
        cleaning_duty: String!
        project: String
        members: [People]
    }

    input PostTeamInput {
        manager: String!
        office: String
        extension_number: String
        mascot: String,
        cleaning_duty: String!
        project: String
    }
`

const resolvers = {
    Query: {
        teams: (parent, args) => dbWorks.getTeams(args),
        team: (parent, args) => dbWorks.getTeams(args)[0],
    },
    Mutation: {
        postTeam: (parent, args) => dbWorks.postTeam(args),
        editTeam: (parent, args) => dbWorks.editTeam(args),
        deleteTeam: (parent, args) => dbWorks.deleteItem('teams', args)
    }
}

module.exports = {
    typeDefs: typeDefs,
    resolvers: resolvers
}

Traking mutaion status

const [login, { data, loading, error, reset }] = useMutation(LOGIN_MUTATION);

공식문서에서는 이렇게 상태를 포함하는 객체를 받아옴

  const [deleteTeam] = useMutation(
  DELETE_TEAM, { onCompleted: deleteTeamCompleted }); // 결과가 성공하면 test 함수를 실행하고 인자로 data를 넘겨준다.

    console.log(deleteTeam)
  function deleteTeamCompleted (data) {
    console.log(data.deleteTeam)
    alert(`${data.deleteTeam.id} 항목이 삭제되었습니다.`);
    refetchTeam();
    setContentId(0)
  }

onCompleted 는 성공적으로 함수가 실행이 되면
deleteTeamCompleted 를 호출함
호출한 deleteTeamCompleted는 data 라는 인자로 함수의 리턴값을 받음

This function is passed the mutation's result data.

refetch

    const { loading, error, data, refetch } = useQuery(GET_TEAMS);

현재는 삭제하면 바로 반영이 안되어서
데이터가 삭제되면 refech 함수를 호출한다
그러면 데이터 삭제가 즉시 반영이 된다.