From 482aaae24f47e13cce405cc732b0fa94ae57c804 Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Thu, 3 Oct 2024 15:40:41 +0200 Subject: [PATCH 1/3] feat: use queryOptions for library home page --- src/hooks/itemPublish.ts | 84 +++++++++++++++++++++++++--------------- 1 file changed, 53 insertions(+), 31 deletions(-) diff --git a/src/hooks/itemPublish.ts b/src/hooks/itemPublish.ts index 8deb248b..e853063f 100644 --- a/src/hooks/itemPublish.ts +++ b/src/hooks/itemPublish.ts @@ -1,6 +1,6 @@ import { ItemPublished, MAX_TARGETS_FOR_READ_REQUEST, UUID } from '@graasp/sdk'; -import { useQuery } from '@tanstack/react-query'; +import { queryOptions, useQuery } from '@tanstack/react-query'; import { splitRequestByIdsAndReturn } from '../api/axios.js'; import * as Api from '../api/itemPublish.js'; @@ -11,6 +11,52 @@ import { QueryClientConfig } from '../types.js'; export default (queryConfig: QueryClientConfig) => { const { defaultQueryOptions } = queryConfig; + const publishedItemsForMemberOptions = ( + memberId?: UUID, + options?: { enabled?: boolean }, + ) => + queryOptions({ + queryKey: itemKeys.published().byMember(memberId), + queryFn: () => { + if (!memberId) { + throw new UndefinedArgument(); + } + return Api.getPublishedItemsForMember(memberId!, queryConfig); + }, + ...defaultQueryOptions, + enabled: Boolean(memberId) && (options?.enabled ?? true), + }); + + const mostLikedPublishedItemsOptions = ( + args?: { + limit?: number; + }, + options?: { enabled?: boolean }, + ) => { + const enabledValue = options?.enabled ?? true; + return queryOptions({ + queryKey: itemKeys.published().mostLiked(args?.limit), + queryFn: () => Api.getMostLikedPublishedItems(args ?? {}, queryConfig), + ...defaultQueryOptions, + enabled: enabledValue, + }); + }; + + const mostRecentPublishedItemsOptions = ( + args?: { + limit?: number; + }, + options?: { enabled?: boolean }, + ) => { + const enabledValue = options?.enabled ?? true; + return queryOptions({ + queryKey: itemKeys.published().mostRecent(args?.limit), + queryFn: () => Api.getMostRecentPublishedItems(args ?? {}, queryConfig), + ...defaultQueryOptions, + enabled: enabledValue, + }); + }; + return { useAllPublishedItems: ( args?: { @@ -26,49 +72,25 @@ export default (queryConfig: QueryClientConfig) => { enabled: enabledValue, }); }, + mostLikedPublishedItemsOptions, useMostLikedPublishedItems: ( args?: { limit?: number; }, options?: { enabled?: boolean }, - ) => { - const enabledValue = options?.enabled ?? true; - return useQuery({ - queryKey: itemKeys.published().mostLiked(args?.limit), - queryFn: () => Api.getMostLikedPublishedItems(args ?? {}, queryConfig), - ...defaultQueryOptions, - enabled: enabledValue, - }); - }, + ) => useQuery(mostLikedPublishedItemsOptions(args, options)), + mostRecentPublishedItemsOptions, useMostRecentPublishedItems: ( args?: { limit?: number; }, options?: { enabled?: boolean }, - ) => { - const enabledValue = options?.enabled ?? true; - return useQuery({ - queryKey: itemKeys.published().mostRecent(args?.limit), - queryFn: () => Api.getMostRecentPublishedItems(args ?? {}, queryConfig), - ...defaultQueryOptions, - enabled: enabledValue, - }); - }, + ) => useQuery(mostRecentPublishedItemsOptions(args, options)), + publishedItemsForMemberOptions, usePublishedItemsForMember: ( memberId?: UUID, options?: { enabled?: boolean }, - ) => - useQuery({ - queryKey: itemKeys.published().byMember(memberId), - queryFn: () => { - if (!memberId) { - throw new UndefinedArgument(); - } - return Api.getPublishedItemsForMember(memberId, queryConfig); - }, - ...defaultQueryOptions, - enabled: Boolean(memberId) && (options?.enabled ?? true), - }), + ) => useQuery(publishedItemsForMemberOptions(memberId, options)), useItemPublishedInformation: ( args: { itemId?: UUID; From 4d5b8f8335955b376b6da5da265b6860bd8a1033 Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Mon, 7 Oct 2024 15:55:11 +0200 Subject: [PATCH 2/3] feat: refactor into queryOptions folder - works without default query options --- src/hooks/itemPublish.ts | 57 ++++--------------------------- src/queryClient.ts | 6 ++++ src/queryOptions/index.ts | 6 ++++ src/queryOptions/itemPublish.ts | 60 +++++++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 50 deletions(-) create mode 100644 src/queryOptions/index.ts create mode 100644 src/queryOptions/itemPublish.ts diff --git a/src/hooks/itemPublish.ts b/src/hooks/itemPublish.ts index e853063f..1e1830ac 100644 --- a/src/hooks/itemPublish.ts +++ b/src/hooks/itemPublish.ts @@ -1,61 +1,21 @@ import { ItemPublished, MAX_TARGETS_FOR_READ_REQUEST, UUID } from '@graasp/sdk'; -import { queryOptions, useQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; import { splitRequestByIdsAndReturn } from '../api/axios.js'; import * as Api from '../api/itemPublish.js'; import { UndefinedArgument } from '../config/errors.js'; import { itemKeys } from '../keys.js'; +import configureQueryOptions from '../queryOptions/index.js'; import { QueryClientConfig } from '../types.js'; export default (queryConfig: QueryClientConfig) => { const { defaultQueryOptions } = queryConfig; - - const publishedItemsForMemberOptions = ( - memberId?: UUID, - options?: { enabled?: boolean }, - ) => - queryOptions({ - queryKey: itemKeys.published().byMember(memberId), - queryFn: () => { - if (!memberId) { - throw new UndefinedArgument(); - } - return Api.getPublishedItemsForMember(memberId!, queryConfig); - }, - ...defaultQueryOptions, - enabled: Boolean(memberId) && (options?.enabled ?? true), - }); - - const mostLikedPublishedItemsOptions = ( - args?: { - limit?: number; - }, - options?: { enabled?: boolean }, - ) => { - const enabledValue = options?.enabled ?? true; - return queryOptions({ - queryKey: itemKeys.published().mostLiked(args?.limit), - queryFn: () => Api.getMostLikedPublishedItems(args ?? {}, queryConfig), - ...defaultQueryOptions, - enabled: enabledValue, - }); - }; - - const mostRecentPublishedItemsOptions = ( - args?: { - limit?: number; - }, - options?: { enabled?: boolean }, - ) => { - const enabledValue = options?.enabled ?? true; - return queryOptions({ - queryKey: itemKeys.published().mostRecent(args?.limit), - queryFn: () => Api.getMostRecentPublishedItems(args ?? {}, queryConfig), - ...defaultQueryOptions, - enabled: enabledValue, - }); - }; + const { + mostLikedPublishedItemsOptions, + mostRecentPublishedItemsOptions, + publishedItemsForMemberOptions, + } = configureQueryOptions(queryConfig); return { useAllPublishedItems: ( @@ -72,21 +32,18 @@ export default (queryConfig: QueryClientConfig) => { enabled: enabledValue, }); }, - mostLikedPublishedItemsOptions, useMostLikedPublishedItems: ( args?: { limit?: number; }, options?: { enabled?: boolean }, ) => useQuery(mostLikedPublishedItemsOptions(args, options)), - mostRecentPublishedItemsOptions, useMostRecentPublishedItems: ( args?: { limit?: number; }, options?: { enabled?: boolean }, ) => useQuery(mostRecentPublishedItemsOptions(args, options)), - publishedItemsForMemberOptions, usePublishedItemsForMember: ( memberId?: UUID, options?: { enabled?: boolean }, diff --git a/src/queryClient.ts b/src/queryClient.ts index 81eb2aeb..91186ef4 100644 --- a/src/queryClient.ts +++ b/src/queryClient.ts @@ -23,6 +23,7 @@ import { } from './config/constants.js'; import configureHooks from './hooks/index.js'; import configureMutations from './mutations/index.js'; +import configureQueryOptions from './queryOptions/index.js'; import type { QueryClientConfig } from './types.js'; import { getHostname } from './utils/util.js'; @@ -76,6 +77,7 @@ export default ( QueryClientProvider: typeof QueryClientProvider; hooks: typeof hooks; useMutation: typeof useMutation; + queryOptions: typeof queryOptions; ReactQueryDevtools: typeof ReactQueryDevtools; dehydrate: typeof dehydrate; Hydrate: typeof HydrationBoundary; @@ -144,6 +146,9 @@ export default ( : undefined; const hooks = configureHooks(queryConfig, websocketClient); + // set up options + const queryOptions = configureQueryOptions(queryConfig); + // returns the queryClient and relative instances return { queryConfig, @@ -153,6 +158,7 @@ export default ( QueryClientProvider, hooks, useMutation, + queryOptions, ReactQueryDevtools, dehydrate, Hydrate: HydrationBoundary, diff --git a/src/queryOptions/index.ts b/src/queryOptions/index.ts new file mode 100644 index 00000000..1436edec --- /dev/null +++ b/src/queryOptions/index.ts @@ -0,0 +1,6 @@ +import { QueryClientConfig } from '../types.js'; +import configureItemPublish from './itemPublish.js'; + +export default (queryConfig: QueryClientConfig) => ({ + ...configureItemPublish(queryConfig), +}); diff --git a/src/queryOptions/itemPublish.ts b/src/queryOptions/itemPublish.ts new file mode 100644 index 00000000..a15fd929 --- /dev/null +++ b/src/queryOptions/itemPublish.ts @@ -0,0 +1,60 @@ +import { UUID } from '@graasp/sdk'; + +import { queryOptions } from '@tanstack/react-query'; + +import { UndefinedArgument } from '../config/errors.js'; +import { Api, QueryClientConfig } from '../index.js'; +import { itemKeys } from '../keys.js'; + +export default (queryConfig: QueryClientConfig) => { + const { defaultQueryOptions } = queryConfig; + + return { + publishedItemsForMemberOptions: ( + memberId?: UUID, + options?: { enabled?: boolean }, + ) => + queryOptions({ + queryKey: itemKeys.published().byMember(memberId), + queryFn: () => { + if (!memberId) { + throw new UndefinedArgument(); + } + return Api.getPublishedItemsForMember(memberId, queryConfig); + }, + ...defaultQueryOptions, + enabled: Boolean(memberId) && (options?.enabled ?? true), + }), + + mostLikedPublishedItemsOptions: ( + args?: { + limit?: number; + }, + options?: { enabled?: boolean }, + ) => { + const enabledValue = options?.enabled ?? true; + return queryOptions({ + queryKey: itemKeys.published().mostLiked(args?.limit), + queryFn: () => Api.getMostLikedPublishedItems(args ?? {}, queryConfig), + // TODO: currently not working in Library if defaults are enable (not refetching)... + // ...defaultQueryOptions, + enabled: enabledValue, + }); + }, + + mostRecentPublishedItemsOptions: ( + args?: { + limit?: number; + }, + options?: { enabled?: boolean }, + ) => { + const enabledValue = options?.enabled ?? true; + return queryOptions({ + queryKey: itemKeys.published().mostRecent(args?.limit), + queryFn: () => Api.getMostRecentPublishedItems(args ?? {}, queryConfig), + ...defaultQueryOptions, + enabled: enabledValue, + }); + }, + }; +}; From a5d7e4af5df30996943d9027f48e2917d5937994 Mon Sep 17 00:00:00 2001 From: Thibault Reidy Date: Tue, 8 Oct 2024 10:27:21 +0200 Subject: [PATCH 3/3] feat: remove TODO --- src/queryOptions/itemPublish.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/queryOptions/itemPublish.ts b/src/queryOptions/itemPublish.ts index a15fd929..bea0ad3d 100644 --- a/src/queryOptions/itemPublish.ts +++ b/src/queryOptions/itemPublish.ts @@ -36,8 +36,7 @@ export default (queryConfig: QueryClientConfig) => { return queryOptions({ queryKey: itemKeys.published().mostLiked(args?.limit), queryFn: () => Api.getMostLikedPublishedItems(args ?? {}, queryConfig), - // TODO: currently not working in Library if defaults are enable (not refetching)... - // ...defaultQueryOptions, + ...defaultQueryOptions, enabled: enabledValue, }); },