From f111685c5886f3e77edfd3621c98d8ac1b9bcce4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 24 Nov 2023 20:00:08 +0100
Subject: refactor(services, types): reorganize GraphQL fetchers and data types

The Typescript mapped types was useful for autocompletion in fetchers
but their are harder to maintain. I think it's better to keep each
query close to its fetcher to have a better understanding of the
fetched data. So I:
* colocate queries with their own fetcher
* colocate mutations with their own mutator
* remove Typescript mapped types for queries and mutations
* move data convertors inside graphql services
* rename most of data types and fetchers
---
 src/utils/hooks/use-pagination/use-pagination.test.ts |  9 ++++++---
 src/utils/hooks/use-pagination/use-pagination.ts      | 17 ++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/utils/hooks/use-pagination')

diff --git a/src/utils/hooks/use-pagination/use-pagination.test.ts b/src/utils/hooks/use-pagination/use-pagination.test.ts
index 20cb37e..18f3ac5 100644
--- a/src/utils/hooks/use-pagination/use-pagination.test.ts
+++ b/src/utils/hooks/use-pagination/use-pagination.test.ts
@@ -1,8 +1,11 @@
 import { beforeEach, describe, expect, it, jest } from '@jest/globals';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { getConnection } from '../../../../tests/utils/graphql';
-import type { EdgesResponse, GraphQLEdgesInput, Search } from '../../../types';
-import { usePagination } from './use-pagination';
+import type { GraphQLConnection } from '../../../types';
+import {
+  type UsePaginationFetcherInput,
+  usePagination,
+} from './use-pagination';
 
 type Data = {
   id: number;
@@ -24,7 +27,7 @@ describe('usePagination', () => {
       after,
       first,
       search,
-    }: GraphQLEdgesInput & Search): Promise<EdgesResponse<Data>> => {
+    }: UsePaginationFetcherInput): Promise<GraphQLConnection<Data>> => {
       const filteredData = search
         ? data.filter((d) => d.title.includes(search))
         : data;
diff --git a/src/utils/hooks/use-pagination/use-pagination.ts b/src/utils/hooks/use-pagination/use-pagination.ts
index 4df521b..2a40aa4 100644
--- a/src/utils/hooks/use-pagination/use-pagination.ts
+++ b/src/utils/hooks/use-pagination/use-pagination.ts
@@ -1,22 +1,25 @@
 import { useCallback } from 'react';
 import useSWRInfinite, { type SWRInfiniteKeyLoader } from 'swr/infinite';
 import type {
-  EdgesResponse,
+  GraphQLConnection,
   GraphQLEdgesInput,
   Maybe,
   Nullable,
-  Search,
 } from '../../../types';
 
+export type UsePaginationFetcherInput = GraphQLEdgesInput & {
+  search?: string;
+};
+
 export type UsePaginationConfig<T> = {
   /**
    * The initial data.
    */
-  fallback?: EdgesResponse<T>[];
+  fallback?: GraphQLConnection<T>[];
   /**
    * A function to fetch more data.
    */
-  fetcher: (props: GraphQLEdgesInput & Search) => Promise<EdgesResponse<T>>;
+  fetcher: (props: UsePaginationFetcherInput) => Promise<GraphQLConnection<T>>;
   /**
    * The number of results per page.
    */
@@ -31,7 +34,7 @@ export type UsePaginationReturn<T> = {
   /**
    * The data from the API.
    */
-  data: Maybe<EdgesResponse<T>[]>;
+  data: Maybe<GraphQLConnection<T>[]>;
   /**
    * An error thrown by fetcher.
    */
@@ -88,8 +91,8 @@ export const usePagination = <T>({
   perPage,
   searchQuery,
 }: UsePaginationConfig<T>): UsePaginationReturn<T> => {
-  const getKey: SWRInfiniteKeyLoader<EdgesResponse<T>> = useCallback(
-    (pageIndex, previousPageData): Nullable<GraphQLEdgesInput & Search> => {
+  const getKey: SWRInfiniteKeyLoader<GraphQLConnection<T>> = useCallback(
+    (pageIndex, previousPageData): Nullable<UsePaginationFetcherInput> => {
       if (previousPageData && !previousPageData.edges.length) return null;
 
       return {
-- 
cgit v1.2.3