diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-24 20:00:08 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-27 14:47:51 +0100 |
| commit | f111685c5886f3e77edfd3621c98d8ac1b9bcce4 (patch) | |
| tree | 62a541fe3afeb64bf745443706fbfb02e96c5230 /src/utils/hooks/use-pagination | |
| parent | bee515641cb144be9a855ff2cac258d2fedab21d (diff) | |
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
Diffstat (limited to 'src/utils/hooks/use-pagination')
| -rw-r--r-- | src/utils/hooks/use-pagination/use-pagination.test.ts | 9 | ||||
| -rw-r--r-- | src/utils/hooks/use-pagination/use-pagination.ts | 17 |
2 files changed, 16 insertions, 10 deletions
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 { |
