Skip to content

Commit

Permalink
feat: migrate to tanstack query
Browse files Browse the repository at this point in the history
  • Loading branch information
fruneen committed Dec 12, 2023
1 parent 277f9aa commit 37df507
Show file tree
Hide file tree
Showing 13 changed files with 132 additions and 176 deletions.
4 changes: 3 additions & 1 deletion template/apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@mantine/notifications": "7.1.3",
"@svgr/webpack": "6.5.1",
"@tabler/icons-react": "2.10.0",
"@tanstack/react-query": "5.13.4",
"@tanstack/react-table": "8.7.9",
"app-constants": "workspace:*",
"app-types": "npm:types",
Expand All @@ -37,7 +38,6 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "7.43.5",
"react-query": "3.39.3",
"schemas": "workspace:*",
"socket.io-client": "4.6.1",
"zod": "3.21.4"
Expand All @@ -51,6 +51,8 @@
"@storybook/builder-webpack5": "6.5.16",
"@storybook/manager-webpack5": "6.5.16",
"@storybook/react": "6.5.16",
"@tanstack/eslint-plugin-query": "5.12.1",
"@tanstack/react-query-devtools": "5.13.5",
"@types/mixpanel-browser": "2.38.1",
"@types/node": "18.15.1",
"@types/qs": "6.9.7",
Expand Down
6 changes: 3 additions & 3 deletions template/apps/web/src/pages/_app/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { FC } from 'react';
import { QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { ModalsProvider } from '@mantine/modals';
Expand All @@ -28,7 +28,7 @@ const App: FC<AppProps> = ({ Component, pageProps }) => (
<Component {...pageProps} />
</PageConfig>
</ModalsProvider>
<ReactQueryDevtools position="bottom-right" />
<ReactQueryDevtools buttonPosition="bottom-right" />
</MantineProvider>
</QueryClientProvider>
</>
Expand Down
4 changes: 2 additions & 2 deletions template/apps/web/src/pages/expire-token/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const ForgotPassword: NextPage = () => {

const {
mutate: resendEmail,
isLoading: isResendEmailLoading,
isPending: isResendEmailPending,
} = accountApi.useResendEmail<ForgotPasswordParams>();

const onSubmit = () => resendEmail({ email }, {
Expand Down Expand Up @@ -63,7 +63,7 @@ const ForgotPassword: NextPage = () => {
</Text>

<Button
loading={isResendEmailLoading}
loading={isResendEmailPending}
fullWidth
onClick={onSubmit}
>
Expand Down
4 changes: 2 additions & 2 deletions template/apps/web/src/pages/forgot-password/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ForgotPassword: NextPage = () => {

const {
mutate: forgotPassword,
isLoading: isForgotPasswordLoading,
isPending: isForgotPasswordPending,
} = accountApi.useForgotPassword<ForgotPasswordParams>();

const {
Expand Down Expand Up @@ -98,7 +98,7 @@ const ForgotPassword: NextPage = () => {

<Button
type="submit"
loading={isForgotPasswordLoading}
loading={isForgotPasswordPending}
>
Send reset link
</Button>
Expand Down
8 changes: 3 additions & 5 deletions template/apps/web/src/pages/profile/index.page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useQueryClient } from 'react-query';
import { showNotification } from '@mantine/notifications';
import Head from 'next/head';
import { NextPage } from 'next';
Expand All @@ -10,6 +9,7 @@ import { Button, TextInput, PasswordInput, Stack, Title } from '@mantine/core';
import { accountApi } from 'resources/account';

import { handleError } from 'utils';
import queryClient from 'query-client';

import PhotoUpload from './components/PhotoUpload';

Expand All @@ -27,8 +27,6 @@ const schema = z.object({
type UpdateParams = z.infer<typeof schema>;

const Profile: NextPage = () => {
const queryClient = useQueryClient();

const { data: account } = accountApi.useGet();

const {
Expand All @@ -46,7 +44,7 @@ const Profile: NextPage = () => {

const {
mutate: updateAccount,
isLoading: isUpdateLoading,
isPending: isUpdatePending,
} = accountApi.useUpdate<UpdateParams>();

const onSubmit = (submitData: UpdateParams) => updateAccount(submitData, {
Expand Down Expand Up @@ -119,7 +117,7 @@ const Profile: NextPage = () => {

<Button
type="submit"
loading={isUpdateLoading}
loading={isUpdatePending}
>
Update Profile
</Button>
Expand Down
4 changes: 2 additions & 2 deletions template/apps/web/src/pages/reset-password/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const ResetPassword: NextPage = () => {

const {
mutate: resetPassword,
isLoading: isResetPasswordLoading,
isPending: isResetPasswordPending,
} = accountApi.useResetPassword<ResetPasswordParams & { token: QueryParam }>();

const onSubmit = ({ password }: ResetPasswordParams) => resetPassword({
Expand Down Expand Up @@ -104,7 +104,7 @@ const ResetPassword: NextPage = () => {

<Button
type="submit"
loading={isResetPasswordLoading}
loading={isResetPasswordPending}
loaderProps={{ size: 'xs' }}
fullWidth
>
Expand Down
4 changes: 2 additions & 2 deletions template/apps/web/src/pages/sign-in/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const SignIn: NextPage = () => {
register, handleSubmit, formState: { errors }, setError,
} = useForm<SignInParams>({ resolver: zodResolver(schema) });

const { mutate: signIn, isLoading: isSignInLoading } = accountApi.useSignIn<SignInParams>();
const { mutate: signIn, isPending: isSignInPending } = accountApi.useSignIn<SignInParams>();

const onSubmit = (data: SignInParams) => signIn(data, {
onError: (e) => handleError(e, setError),
Expand Down Expand Up @@ -78,7 +78,7 @@ const SignIn: NextPage = () => {
</Stack>

<Button
loading={isSignInLoading}
loading={isSignInPending}
type="submit"
fullWidth
mt={34}
Expand Down
4 changes: 2 additions & 2 deletions template/apps/web/src/pages/sign-up/index.page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const SignUp: NextPage = () => {
setPasswordRulesData(updatedPasswordRulesData);
}, [passwordValue]);

const { mutate: signUp, isLoading: isSignUpLoading } = accountApi.useSignUp<SignUpParams>();
const { mutate: signUp, isPending: isSignUpPending } = accountApi.useSignUp<SignUpParams>();

const onSubmit = (data: SignUpParams) => signUp(data, {
onSuccess: (response: any) => {
Expand Down Expand Up @@ -194,7 +194,7 @@ const SignUp: NextPage = () => {

<Button
type="submit"
loading={isSignUpLoading}
loading={isSignUpPending}
fullWidth
mt={34}
>
Expand Down
4 changes: 2 additions & 2 deletions template/apps/web/src/query-client.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { QueryClient } from 'react-query';
import { QueryClient, keepPreviousData } from '@tanstack/react-query';

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnReconnect: false,
retry: false,
keepPreviousData: true,
placeholderData: keepPreviousData,
},
},
});
Expand Down
130 changes: 55 additions & 75 deletions template/apps/web/src/resources/account/account.api.ts
Original file line number Diff line number Diff line change
@@ -1,87 +1,67 @@
import { useMutation, useQuery } from 'react-query';
import { useMutation, useQuery } from '@tanstack/react-query';

import { User } from 'types';

import { apiService } from 'services';

import queryClient from 'query-client';

export function useSignIn<T>() {
const signIn = (data: T) => apiService.post('/account/sign-in', data);

return useMutation<User, unknown, T>(signIn, {
onSuccess: (data) => {
queryClient.setQueryData(['account'], data);
},
});
}

export function useSignOut() {
const signOut = () => apiService.post('/account/sign-out');

return useMutation(signOut, {
onSuccess: () => {
queryClient.setQueryData(['account'], null);
},
});
}

export function useSignUp<T>() {
const signUp = (data: T) => apiService.post('/account/sign-up', data);

export const useSignIn = <T>() => useMutation<User, unknown, T>({
mutationFn: (data: T) => apiService.post('/account/sign-in', data),
onSuccess: (data) => {
queryClient.setQueryData(['account'], data);
},
});

export const useSignOut = () => useMutation({
mutationFn: () => apiService.post('/account/sign-out'),
onSuccess: () => {
queryClient.setQueryData(['account'], null);
},
});

export const useSignUp = <T>() => {
interface SignUpResponse {
signupToken: string;
}

return useMutation<SignUpResponse, unknown, T>(signUp);
}

export function useForgotPassword<T>() {
const forgotPassword = (data: T) => apiService.post('/account/forgot-password', data);

return useMutation<{}, unknown, T>(forgotPassword);
}

export function useResetPassword<T>() {
const resetPassword = (data: T) => apiService.put('/account/reset-password', data);

return useMutation<{}, unknown, T>(resetPassword);
}

export function useResendEmail<T>() {
const resendEmail = (data: T) => apiService.post('/account/resend-email', data);

return useMutation<{}, unknown, T>(resendEmail);
}

export function useGet(options? : {}) {
const get = () => apiService.get('/account');

return useQuery<User>(['account'], get, options);
}

export function useUpdate<T>() {
const update = (data: T) => apiService.put('/account', data);

return useMutation<User, unknown, T>(update);
}

export function useUploadAvatar<T>() {
const uploadAvatar = (data: T) => apiService.post('/account/avatar', data);

return useMutation<User, unknown, T>(uploadAvatar, {
onSuccess: (data) => {
queryClient.setQueryData(['account'], data);
},
});
}

export function useRemoveAvatar() {
const removeAvatar = () => apiService.delete('/account/avatar');

return useMutation<User>(removeAvatar, {
onSuccess: (data) => {
queryClient.setQueryData(['account'], data);
},
return useMutation<SignUpResponse, unknown, T>({
mutationFn: (data: T) => apiService.post('/account/sign-up', data),
});
}
};

export const useForgotPassword = <T>() => useMutation<{}, unknown, T>({
mutationFn: (data: T) => apiService.post('/account/forgot-password', data),
});

export const useResetPassword = <T>() => useMutation<{}, unknown, T>({
mutationFn: (data: T) => apiService.put('/account/reset-password', data),
});

export const useResendEmail = <T>() => useMutation<{}, unknown, T>({
mutationFn: (data: T) => apiService.post('/account/resend-email', data),
});

export const useGet = (options? : {}) => useQuery<User>({
queryKey: ['account'],
queryFn: () => apiService.get('/account'),
...options,
});

export const useUpdate = <T>() => useMutation<User, unknown, T>({
mutationFn: (data: T) => apiService.put('/account', data),
});

export const useUploadAvatar = <T>() => useMutation<User, unknown, T>({
mutationFn: (data: T) => apiService.post('/account/avatar', data),
onSuccess: (data) => {
queryClient.setQueryData(['account'], data);
},
});

export const useRemoveAvatar = () => useMutation<User>({
mutationFn: () => apiService.delete('/account/avatar'),
onSuccess: (data) => {
queryClient.setQueryData(['account'], data);
},
});
9 changes: 5 additions & 4 deletions template/apps/web/src/resources/user/user.api.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { useQuery } from 'react-query';
import { useQuery } from '@tanstack/react-query';

import { User } from 'types';

import { apiService } from 'services';

export function useList<T>(params: T) {
const list = () => apiService.get('/users', params);

interface UserListResponse {
count: number;
items: User[];
totalPages: number;
}

return useQuery<UserListResponse>(['users', params], list);
return useQuery<UserListResponse>({
queryKey: ['users', params],
queryFn: () => apiService.get('/users', params),
});
}
2 changes: 1 addition & 1 deletion template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"turbo-start": "turbo run development --filter=\"./apps/*\" --filter=\"./packages/*\" --filter=\"!react-email-client\" ",
"docker": "bash ./bin/start.sh",
"start": "bash ./bin/run-all.sh",
"prepare": "husky install"
"prepare": "cd .. husky install"
},
"devDependencies": {
"husky": "8.0.3",
Expand Down
Loading

0 comments on commit 37df507

Please sign in to comment.