Graphql mutations

using the github graphql api with react-query

we'll use follow and unfollow user mutations it takes in parmeter

typescript

1input:FollowUserInput|UnfollowUserInput

which has the fields

typescript

1{userId:String! ,clientMutationId:String}

so we'll be passing in the userId which we'll get from the user as id , we can ignore clientMutationId since it's not required

the mutations

typescript

1import gql from "graphql-tag";
2
3export const FOLLOWUSER = gql`
4  mutation followUser($input: FollowUserInput!) {
5    followUser(input: $input) {
6      clientMutationId
7    }
8  }
9`;
10
11export const UNFOLLOWUSER = gql`
12mutation unfollowUser($input:UnfollowUserInput!){
13  unfollowUser(input:$input){
14    clientMutationId
15  }
16}
17`;

custom usegQLmutatin

typescript

1import { useMutation } from "react-query";
2import { GraphQLClient } from "graphql-request";
3import { DocumentNode } from "graphql";
4
5export const useGQLmutation = (
6  token: string,
7  mutation: DocumentNode,
8  config = {}
9) => {
10  const endpoint = "https://api.github.com/graphql";
11  const headers = {
12    headers: {
13      Authorization: `Bearer ${token}`,
14      "Content-Type": "application/json",
15    },
16  };
17  const graphQLClient = new GraphQLClient(endpoint, headers);
18  const fetchData = async (vars: any) => {
19     return await graphQLClient.request(mutation,vars);
20   };
21  
22   return useMutation((vars:any) => {return fetchData(vars)},config);
23
24};
25

usage in the project

typescript

1const followMutation = useGQLmutation(token,FOLLOWUSER)
2const unfollowMutation = useGQLmutation(token,UNFOLLOWUSER)
3const [yes, setYes] = useState<any>(dev?.viewerIsFollowing);
4
5const followThem = (their_id: string) => {
6    setYes(true);
7    // followUser(their_name, token);
8    followMutation.mutate({input:{userId:their_id}})
9  };
10  const unfollowThem = (their_id: string) => {
11    setYes(false);
12    // unfollowUser(their_name, token);
13    unfollowMutation.mutate({input:{userId:their_id}})
14  };
15

full project live preview

Graphql mutations with github gql api : follow and unfollow a user

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Graphql mutations with github gql api : follow and unfollow a user

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Graphql mutations

using the github graphql api with react-query

the mutations

custom usegQLmutatin

usage in the project

More posts

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

More posts

Setting up vector search for github starred repos

Live activity bus (Elysia SSE + pub/sub powered by nodejs event emitter)

Queues and workflows with conveyor

Graphql mutations

using the github graphql api with react-query

the mutations

custom usegQLmutatin

usage in the project