Based in

Nairobi

Loading article…

Based in

Nairobi

Postreactquery, graphql, github, api

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

Graphql mutations using the github graphql api with react-query we'll use...

Date published

September 3, 2022

More posts

PostFeb 20, 2025

How to get the Oauth providre access tokens from next auth/authjs

Modify your nextauth client and add a callbacks section that will get the access token from the...

nextjs
authjs
typescript

PostAug 16, 2026

Tanstack DB in action

The team at TanStack, makers of TanStack Query (aka react-query), partnered with the ElectricSQL team...

react
tanstackdb
webdev

PostJul 28, 2026

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Why You Might Still Pick Next.js Over TanStack Start From a TanStack Start...

nextjs
tanstack
react

Full-stack TypeScript, warm interfaces, strict systems, and occasionally a creature feature.

© 2026 Dennis Waweru

Built from Nairobi with TypeScript

Contents

01using the github graphql api with react-query
02the mutations
03custom usegQLmutatin
04usage in the project

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