1const query = useQuery(key, fetchData,
2{
3enabled: username.length > 3,
4  select: (data:User) => {
5 let newdata   
6  if (data.user.isViewer){
7  newdata = {...data.user,OP:true}
8  return {user:newdata}
9  }
10  return data
11  }
12}
13)

1const keyword = "a"
2const query = useQuery(key, fetchData,
3{
4enabled: username.length > 3,
5  select: (data:User) => {
6 let newdata   
7  if (keyword){
8  const followers = data.user.followers.edges.filter((item)=>{
9   return item.node.login.includes(keyword)
10  })  
11  newdata = {...data.user,followers}
12  return {user:newdata}
13  }
14  return data
15  }
16}
17)

1const query = useQuery(key, fetchData,
2{
3enabled: username.length > 3,
4  select: (data:User) => {
5 let newdata   
6  if (keyword){
7  const followers = data.user.followers.edges.filter((item)=>{
8   return item.node.login.includes(keyword)
9  })  
10  newdata = {...data.user,followers}
11  return {user:newdata}
12  }
13  return data
14  },
15  onSuccess:(data:User)=>{
16    console.log("success")
17//save token to local storage no issues with it
18  },
19  onError:(error:any)=>{
20    console.log("error  = ",error.response)
21    if(error?.response?.status === "401" || error?.response?.status === "402"){
22      // invalidate my locally stored token to send me back to 
23      // login screen,those codes mean tokenhas an issue
24    }
25  }
26}
27)

1const query = useInfiniteQuery(key, fetchData, {
2  enabled: username.length > 3,
3 onSuccess: (data: RootResponse) => {
4    console.log("success", data);
5  },
6  onError: (error: any) => {
7    console.log("error  = ", error.response);
8    if (error?.response?.status === "401" || error?.response?.status === "402") {
9      // invalidate my locally stored token to send me back to
10      // login screen,those codes mean tokenhas an issue
11    }
12  },
13  getPreviousPageParam: (firstPage: Page) => {
14    return firstPage?.user?.followers?.pageInfo?.startCursor ?? null;
15  },
16  getNextPageParam: (lastPage: Page) => {
17    return lastPage?.user?.followers?.pageInfo?.endCursor ?? null;
18  },
19});
20console.log("test query === ",query.data)

1  const pages = query?.data?.pages;
2  //  console.log("followers === ",followers)
3  //@ts-ignore
4  const extras = pages[pages.length - 1].user?.followers;
5  const hasMore = extras?.pageInfo?.hasNextPage;
6
7return (
8  <div className="w-full h-full ">
9    {!query.isFetchingNextPage && hasMore? (
10      <button
11        className="m-2 hover:text-purple-400 shadow-lg hover:shadow-purple"
12        onClick={() => {
13          query.fetchNextPage();
14        }}
15      >
16        --- load more ---
17      </button>
18    ) : null}
19    {query.isFetchingNextPage ? (
20      <div className="w-full flex-center m-1 p-1">loading more...</div>
21    ) : null}
22  </div>
23)
24

1    <div className="h-fit w-full flex-center  flex-wrap">
2      {pages?.map((page) => {
3        return page?.user?.followers?.edges?.map((item) => {
4          return (
5            <div className='w-[30%] h-14 p-3 m-2 border border-green-500 '>
6              user :{item.node.login}</div>
7          );
8        });
9      })}
10    </div>
11

1const fetchData = async () => await graphQLClient.request(USER,{name:"tigawanna",
2first:10,after:null
3});
4

1const fetchData = async (deps: any) => {
2    const after = deps?.pageParam ? deps.pageParam : null;
3    return await graphQLClient.request(USER, {
4      name: "tigawanna",
5      first: 10,
6      after,
7    });
8  };
9

1  getNextPageParam: (lastPage: Page) => {
2    return lastPage?.user?.followers?.pageInfo?.endCursor ?? null;
3  },
4

1export const concatFollowerPages = (data: RootResponse, keyword: string) => {
2
3let totalRepos = data.pages[0].user.followers.edges;
4  let i = 1;
5  for (i = 1; i < data.pages.length; i++) {
6    if (data?.pages) {
7      totalRepos = [...totalRepos, ...data.pages[i].user.followers.edges];
8    }
9  }
10
11  const filtered = totalRepos.filter((item) =>
12    item.node.login.toLowerCase().includes(keyword.toLowerCase())
13  );
14  const base = data.pages[data.pages.length -1].user;
15  const user = {
16    ...base,
17    login: base.login,
18    followers: {
19      edges: filtered,
20      totalCount: base.followers.totalCount,
21      pageInfo: base.followers.pageInfo,
22    },
23  };
24
25  const final:RootResponse = {
26    pageParams: [...data.pageParams],
27    pages: [{ user: user }],
28  };
29
30  return final;
31};
32

1const query = useInfiniteQuery(key, fetchData, {
2  enabled: username.length > 3,
3  select:(data:RootResponse)=>{
4  return concatFollowerPages(data,"")
5  },
6  onSuccess: (data: RootResponse) => {
7    // console.log("success", data);
8  },
9  onError: (error: any) => {
10    console.log("error  = ", error.response);
11    if (error?.response?.status === "401" || error?.response?.status === "402") {
12      // invalidate my locally stored token to send me back to
13      // login screen,those codes mean tokenhas an issue
14    }
15  },
16  getPreviousPageParam: (firstPage: Page) => {
17    return firstPage?.user?.followers?.pageInfo?.startCursor ?? null;
18  },
19  getNextPageParam: (lastPage: Page) => {
20    return lastPage?.user?.followers?.pageInfo?.endCursor ?? null;
21  },
22});