github gql api를 사용한 Graphql 변형: 사용자 팔로우 및 언팔로우
8353 단어 githubgraphqlreactqueryapi
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
Reference
이 문제에 관하여(github gql api를 사용한 Graphql 변형: 사용자 팔로우 및 언팔로우), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/tigawanna/graphql-mutations-with-github-gql-api-follow-and-unfollow-a-user-7pk
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
input:FollowUserInput|UnfollowUserInput
{userId:String! ,clientMutationId:String}
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
}
}
`;
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}})
};
Reference
이 문제에 관하여(github gql api를 사용한 Graphql 변형: 사용자 팔로우 및 언팔로우), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tigawanna/graphql-mutations-with-github-gql-api-follow-and-unfollow-a-user-7pk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)