better usage of query options

src/features/auth/components/register-form.tsx

@@ -19,7 +19,7 @@ export const RegisterForm = ({ onSuccess }: RegisterFormProps) => {
  const redirectTo = searchParams.get('redirectTo');
 
  const teamsQuery = useTeams({
- config: {
+ queryConfig: {
  enabled: chooseTeam,
  },
  });

src/features/comments/api/create-comment.ts

@@ -6,7 +6,7 @@ import { MutationConfig } from '@/lib/react-query';
 
 import { Comment } from '../types';
 
-import { getCommentsKey } from './get-comments';
+import { getCommentsQueryOptions } from './get-comments';
 
 export const createCommentInputSchema = z.object({
  discussionId: z.string().min(1, 'Required'),
@@ -25,21 +25,21 @@ export const createComment = ({
 
 type UseCreateCommentOptions = {
  discussionId: string;
- config?: MutationConfig<typeof createComment>;
+ mutationConfig?: MutationConfig<typeof createComment>;
 };
 
 export const useCreateComment = ({
- config,
+ mutationConfig,
  discussionId,
 }: UseCreateCommentOptions) => {
  const queryClient = useQueryClient();
 
- const { onSuccess, ...restConfig } = config || {};
+ const { onSuccess, ...restConfig } = mutationConfig || {};
 
  return useMutation({
  onSuccess: (...args) => {
  queryClient.invalidateQueries({
- queryKey: getCommentsKey(discussionId),
+ queryKey: getCommentsQueryOptions(discussionId).queryKey,
  });
  onSuccess?.(...args);
  },

src/features/comments/api/delete-comment.ts

@@ -3,29 +3,29 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api-client';
 import { MutationConfig } from '@/lib/react-query';
 
-import { getCommentsKey } from './get-comments';
+import { getCommentsQueryOptions } from './get-comments';
 
 export const deleteComment = ({ commentId }: { commentId: string }) => {
  return api.delete(`/comments/${commentId}`);
 };
 
 type UseDeleteCommentOptions = {
  discussionId: string;
- config?: MutationConfig<typeof deleteComment>;
+ mutationConfig?: MutationConfig<typeof deleteComment>;
 };
 
 export const useDeleteComment = ({
- config,
+ mutationConfig,
  discussionId,
 }: UseDeleteCommentOptions) => {
  const queryClient = useQueryClient();
 
- const { onSuccess, ...restConfig } = config || {};
+ const { onSuccess, ...restConfig } = mutationConfig || {};
 
  return useMutation({
  onSuccess: (...args) => {
  queryClient.invalidateQueries({
- queryKey: getCommentsKey(discussionId),
+ queryKey: getCommentsQueryOptions(discussionId).queryKey,
  });
  onSuccess?.(...args);
  },

src/features/comments/api/get-comments.ts

@@ -1,7 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { api } from '@/lib/api-client';
-import { ApiFnReturnType, QueryConfig } from '@/lib/react-query';
+import { QueryConfig } from '@/lib/react-query';
 
 import { Comment } from '../types';
 
@@ -17,22 +17,24 @@ export const getComments = ({
  });
 };
 
-type QueryFnType = typeof getComments;
-
-export const getCommentsKey = (discussionId: string) => [
- 'comments',
- discussionId,
-];
+export const getCommentsQueryOptions = (discussionId: string) => {
+ return queryOptions({
+ queryKey: ['comments', discussionId],
+  queryFn: () => getComments({ discussionId }),
+ });
+};
 
 type UseCommentsOptions = {
  discussionId: string;
- config?: QueryConfig<QueryFnType>;
+ queryConfig?: QueryConfig<typeof getComments>;
 };
 
-export const useComments = ({ discussionId, config }: UseCommentsOptions) => {
- return useQuery<ApiFnReturnType<QueryFnType>>({
- queryKey: getCommentsKey(discussionId),
- queryFn: () => getComments({ discussionId }),
- ...config,
+export const useComments = ({
+ discussionId,
+ queryConfig,
+}: UseCommentsOptions) => {
+ return useQuery({
+ ...getCommentsQueryOptions(discussionId),
+ ...queryConfig,
  });
 };

src/features/comments/components/create-comment.tsx

@@ -17,7 +17,7 @@ export const CreateComment = ({ discussionId }: CreateCommentProps) => {
  const { addNotification } = useNotifications();
  const createCommentMutation = useCreateComment({
  discussionId,
- config: {
+ mutationConfig: {
  onSuccess: () => {
  addNotification({
  type: 'success',

src/features/comments/components/delete-comment.tsx

@@ -15,7 +15,7 @@ export const DeleteComment = ({ id, discussionId }: DeleteCommentProps) => {
  const { addNotification } = useNotifications();
  const deleteCommentMutation = useDeleteComment({
  discussionId,
- config: {
+ mutationConfig: {
  onSuccess: () => {
  addNotification({
  type: 'success',

src/features/discussions/api/create-discussion.ts

@@ -6,7 +6,7 @@ import { MutationConfig } from '@/lib/react-query';
 
 import { Discussion } from '../types';
 
-import { getDiscussionsKey } from './get-discussions';
+import { getDiscussionsQueryOptions } from './get-discussions';
 
 export const createDiscussionInputSchema = z.object({
  title: z.string().min(1, 'Required'),
@@ -24,20 +24,20 @@ export const createDiscussion = ({
 };
 
 type UseCreateDiscussionOptions = {
- config?: MutationConfig<typeof createDiscussion>;
+ mutationConfig?: MutationConfig<typeof createDiscussion>;
 };
 
 export const useCreateDiscussion = ({
- config,
+ mutationConfig,
 }: UseCreateDiscussionOptions = {}) => {
  const queryClient = useQueryClient();
 
- const { onSuccess, ...restConfig } = config || {};
+ const { onSuccess, ...restConfig } = mutationConfig || {};
 
  return useMutation({
  onSuccess: (...args) => {
  queryClient.invalidateQueries({
- queryKey: getDiscussionsKey(),
+ queryKey: getDiscussionsQueryOptions().queryKey,
  });
  onSuccess?.(...args);
  },

src/features/discussions/api/delete-discussion.ts

@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api-client';
 import { MutationConfig } from '@/lib/react-query';
 
-import { getDiscussionsKey } from './get-discussions';
+import { getDiscussionsQueryOptions } from './get-discussions';
 
 export const deleteDiscussion = ({
  discussionId,
@@ -14,20 +14,20 @@ export const deleteDiscussion = ({
 };
 
 type UseDeleteDiscussionOptions = {
- config?: MutationConfig<typeof deleteDiscussion>;
+ mutationConfig?: MutationConfig<typeof deleteDiscussion>;
 };
 
 export const useDeleteDiscussion = ({
- config,
+ mutationConfig,
 }: UseDeleteDiscussionOptions = {}) => {
  const queryClient = useQueryClient();
 
- const { onSuccess, ...restConfig } = config || {};
+ const { onSuccess, ...restConfig } = mutationConfig || {};
 
  return useMutation({
  onSuccess: (...args) => {
  queryClient.invalidateQueries({
- queryKey: getDiscussionsKey(),
+ queryKey: getDiscussionsQueryOptions().queryKey,
  });
  onSuccess?.(...args);
  },

src/features/discussions/api/get-discussion.ts

@@ -1,7 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, queryOptions } from '@tanstack/react-query';
 
 import { api } from '@/lib/api-client';
-import { ApiFnReturnType, QueryConfig } from '@/lib/react-query';
+import { QueryConfig } from '@/lib/react-query';
 
 import { Discussion } from '../types';
 
@@ -13,25 +13,24 @@ export const getDiscussion = ({
  return api.get(`/discussions/${discussionId}`);
 };
 
-type QueryFnType = typeof getDiscussion;
-
-export const getDiscussionKey = (discussionId: string) => [
- 'discussions',
- discussionId,
-];
+export const getDiscussionsQueryOptions = (discussionId: string) => {
+ return queryOptions({
+ queryKey: ['discussions', discussionId],
+  queryFn: () => getDiscussion({ discussionId }),
+ });
+};
 
 type UseDiscussionOptions = {
  discussionId: string;
- config?: QueryConfig<QueryFnType>;
+ queryConfig?: QueryConfig<typeof getDiscussionsQueryOptions>;
 };
 
 export const useDiscussion = ({
  discussionId,
- config,
+ queryConfig,
 }: UseDiscussionOptions) => {
- return useQuery<ApiFnReturnType<QueryFnType>>({
- ...config,
- queryKey: getDiscussionKey(discussionId),
- queryFn: () => getDiscussion({ discussionId }),
+ return useQuery({
+ ...getDiscussionsQueryOptions(discussionId),
+ ...queryConfig,
  });
 };

src/features/discussions/api/get-discussions.ts

@@ -1,26 +1,28 @@
-import { useQuery } from '@tanstack/react-query';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 
 import { api } from '@/lib/api-client';
-import { ApiFnReturnType, QueryConfig } from '@/lib/react-query';
+import { QueryConfig } from '@/lib/react-query';
 
 import { Discussion } from '../types';
 
 export const getDiscussions = (): Promise<Discussion[]> => {
  return api.get('/discussions');
 };
 
-type QueryFnType = typeof getDiscussions;
-
-export const getDiscussionsKey = () => ['discussions'];
+export const getDiscussionsQueryOptions = () => {
+ return queryOptions({
+ queryKey: ['discussions'],
+ queryFn: () => getDiscussions(),
+ });
+};
 
 type UseDiscussionsOptions = {
- config?: QueryConfig<QueryFnType>;
+ queryConfig?: QueryConfig<typeof getDiscussionsQueryOptions>;
 };
 
-export const useDiscussions = ({ config }: UseDiscussionsOptions = {}) => {
- return useQuery<ApiFnReturnType<QueryFnType>>({
- ...config,
- queryKey: getDiscussionsKey(),
- queryFn: () => getDiscussions(),
+export const useDiscussions = ({ queryConfig }: UseDiscussionsOptions = {}) => {
+ return useQuery({
+ ...getDiscussionsQueryOptions(),
+ ...queryConfig,
  });
 };

src/features/discussions/api/update-discussion.ts

@@ -6,7 +6,7 @@ import { MutationConfig } from '@/lib/react-query';
 
 import { Discussion } from '../types';
 
-import { getDiscussionKey } from './get-discussion';
+import { getDiscussionsQueryOptions } from './get-discussion';
 
 export const updateDiscussionInputSchema = z.object({
  title: z.string().min(1, 'Required'),
@@ -26,20 +26,20 @@ export const updateDiscussion = ({
 };
 
 type UseUpdateDiscussionOptions = {
- config?: MutationConfig<typeof updateDiscussion>;
+ mutationConfig?: MutationConfig<typeof updateDiscussion>;
 };
 
 export const useUpdateDiscussion = ({
- config,
+ mutationConfig,
 }: UseUpdateDiscussionOptions = {}) => {
  const queryClient = useQueryClient();
 
- const { onSuccess, ...restConfig } = config || {};
+ const { onSuccess, ...restConfig } = mutationConfig || {};
 
  return useMutation({
  onSuccess: (data, ...args) => {
  queryClient.refetchQueries({
- queryKey: getDiscussionKey(data.id),
+ queryKey: getDiscussionsQueryOptions(data.id).queryKey,
  });
  onSuccess?.(data, ...args);
  },

src/features/discussions/components/create-discussion.tsx

@@ -13,7 +13,7 @@ import {
 export const CreateDiscussion = () => {
  const { addNotification } = useNotifications();
  const createDiscussionMutation = useCreateDiscussion({
- config: {
+ mutationConfig: {
  onSuccess: () => {
  addNotification({
  type: 'success',

src/features/discussions/components/delete-discussion.tsx

@@ -14,7 +14,7 @@ type DeleteDiscussionProps = {
 export const DeleteDiscussion = ({ id }: DeleteDiscussionProps) => {
  const { addNotification } = useNotifications();
  const deleteDiscussionMutation = useDeleteDiscussion({
- config: {
+ mutationConfig: {
  onSuccess: () => {
  addNotification({
  type: 'success',

src/features/discussions/components/discussions-list.tsx

@@ -8,7 +8,11 @@ import { useDiscussions } from '../api/get-discussions';
 import { DeleteDiscussion } from './delete-discussion';
 
 export const DiscussionsList = () => {
- const discussionsQuery = useDiscussions();
+ const discussionsQuery = useDiscussions({
+ queryConfig: {
+ refetchInterval: () => 1000,
+ },
+ });
 
  if (discussionsQuery.isLoading) {
  return (

src/features/discussions/components/update-discussion.tsx

@@ -19,7 +19,7 @@ export const UpdateDiscussion = ({ discussionId }: UpdateDiscussionProps) => {
  const { addNotification } = useNotifications();
  const discussionQuery = useDiscussion({ discussionId });
  const updateDiscussionMutation = useUpdateDiscussion({
- config: {
+ mutationConfig: {
  onSuccess: () => {
  addNotification({
  type: 'success',

src/features/discussions/routes/discussion.tsx

@@ -13,7 +13,12 @@ import { UpdateDiscussion } from '../components/update-discussion';
 export const DiscussionRoute = () => {
  const params = useParams();
  const discussionId = params.discussionId as string;
- const discussionQuery = useDiscussion({ discussionId });
+ const discussionQuery = useDiscussion({
+ discussionId,
+ queryConfig: {
+ refetchInterval: 1000,
+ },
+ });
 
  if (discussionQuery.isLoading) {
  return (