github gql api를 사용한 Graphql 변형: 사용자 팔로우 및 언팔로우

Graphql 돌연변이



react-query와 함께 github graphql api 사용



팔로우 및 언팔로우 사용자 변형을 사용합니다.
그것은 매개 변수에 걸립니다

input:FollowUserInput|UnfollowUserInput


필드가있는

{userId:String! ,clientMutationId:String}


그래서 우리는 id로 사용자로부터 얻을 userId를 전달할 것입니다. clientMutationId는 필요하지 않으므로 무시할 수 있습니다.

돌연변이




import gql from "graphql-tag";

export const FOLLOWUSER = gql`
  mutation followUser($input: FollowUserInput!) {
    followUser(input: $input) {
      clientMutationId
    }
  }
`;

export const UNFOLLOWUSER = gql`
mutation unfollowUser($input:UnfollowUserInput!){
  unfollowUser(input:$input){
    clientMutationId
  }
}
`;


커스텀 usegQL 돌연변이




import { useMutation } from "react-query";
import { GraphQLClient } from "graphql-request";
import { DocumentNode } from "graphql";

export const useGQLmutation = (
  token: string,
  mutation: DocumentNode,
  config = {}
) => {
  const endpoint = "https://api.github.com/graphql";
  const headers = {
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
  };
  const graphQLClient = new GraphQLClient(endpoint, headers);
  const fetchData = async (vars: any) => {
     return await graphQLClient.request(mutation,vars);
   };

   return useMutation((vars:any) => {return fetchData(vars)},config);

};



프로젝트에서의 사용법




const followMutation = useGQLmutation(token,FOLLOWUSER)
const unfollowMutation = useGQLmutation(token,UNFOLLOWUSER)
const [yes, setYes] = useState<any>(dev?.viewerIsFollowing);

const followThem = (their_id: string) => {
    setYes(true);
    // followUser(their_name, token);
    followMutation.mutate({input:{userId:their_id}})
  };
  const unfollowThem = (their_id: string) => {
    setYes(false);
    // unfollowUser(their_name, token);
    unfollowMutation.mutate({input:{userId:their_id}})
  };



full project
live preview

좋은 웹페이지 즐겨찾기