Skip to content

Commit 7fdce9c

Browse files
MU-SoftwareMU-Software
committed
fix: API에서 오류 발생 시 invalid hook call이 발생하던 구조적 문제 수정
1 parent 46305f9 commit 7fdce9c

File tree

5 files changed

+52
-45
lines changed

5 files changed

+52
-45
lines changed

‎packages/shop/src/components/features/cart.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,9 @@ export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = ({
6969
onPaymentCompleted,
7070
}) => {
7171
const queryClient = useQueryClient();
72-
const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation();
73-
const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation();
72+
const shopAPIClient = ShopHooks.useShopClient();
73+
const cartOrderStartMutation = ShopHooks.usePrepareCartOrderMutation(shopAPIClient);
74+
const removeItemFromCartMutation = ShopHooks.useRemoveItemFromCartMutation(shopAPIClient);
7475

7576
const removeItemFromCart = (cartProductId: string) =>
7677
removeItemFromCartMutation.mutate({ cartProductId });
@@ -100,7 +101,7 @@ export const CartStatus: React.FC<{ onPaymentCompleted?: () => void }> = ({
100101

101102
const WrappedShopCartList: React.FC = () => {
102103
// eslint-disable-next-line react-hooks/rules-of-hooks
103-
const { data } = ShopHooks.useCart();
104+
const { data } = ShopHooks.useCart(shopAPIClient);
104105

105106
return !data.hasOwnProperty("products") || data.products.length === 0 ? (
106107
<Typography variant="body1" color="error">

‎packages/shop/src/components/features/order.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,10 @@ const PaymentHistoryStatusTranslated: {
3333

3434
const OrderItem: React.FC<{ order: ShopSchemas.Order; disabled?: boolean }> = ({ order, disabled }) => {
3535
const { shopApiDomain } = ShopHooks.useShopContext();
36-
const orderRefundMutation = ShopHooks.useOrderRefundMutation();
37-
const oneItemRefundMutation = ShopHooks.useOneItemRefundMutation();
38-
const optionsOfOneItemInOrderPatchMutation = ShopHooks.useOptionsOfOneItemInOrderPatchMutation();
36+
const shopAPIClient = ShopHooks.useShopClient();
37+
const orderRefundMutation = ShopHooks.useOrderRefundMutation(shopAPIClient);
38+
const oneItemRefundMutation = ShopHooks.useOneItemRefundMutation(shopAPIClient);
39+
const optionsOfOneItemInOrderPatchMutation = ShopHooks.useOptionsOfOneItemInOrderPatchMutation(shopAPIClient);
3940

4041
const refundOrder = () => orderRefundMutation.mutate({ order_id: order.id });
4142
const openReceipt = () => window.open(`${shopApiDomain}/v1/orders/${order.id}/receipt/`, "_blank");
@@ -207,7 +208,8 @@ const OrderItem: React.FC<{ order: ShopSchemas.Order; disabled?: boolean }> = ({
207208
export const OrderList: React.FC = () => {
208209
const WrappedOrderList: React.FC = () => {
209210
// eslint-disable-next-line react-hooks/rules-of-hooks
210-
const { data } = ShopHooks.useOrders();
211+
const shopAPIClient = ShopHooks.useShopClient();
212+
const { data } = ShopHooks.useOrders(shopAPIClient);
211213

212214
return (
213215
<List>

‎packages/shop/src/components/features/product.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,9 @@ const ProductItem: React.FC<{
9595
const optionFormRef = React.useRef<HTMLFormElement>(null);
9696

9797
const queryClient = useQueryClient();
98-
const oneItemOrderStartMutation = ShopHooks.usePrepareOneItemOrderMutation();
99-
const addItemToCartMutation = ShopHooks.useAddItemToCartMutation();
98+
const shopAPIClient = ShopHooks.useShopClient();
99+
const oneItemOrderStartMutation = ShopHooks.usePrepareOneItemOrderMutation(shopAPIClient);
100+
const addItemToCartMutation = ShopHooks.useAddItemToCartMutation(shopAPIClient);
100101

101102
const addItemToCart = () =>
102103
addItemToCartMutation.mutate(
@@ -199,9 +200,10 @@ const ProductItem: React.FC<{
199200
);
200201
};
201202

202-
export const ProductList: React.FC = () => {
203+
export const ProductList: React.FC<ShopSchemas.ProductListQueryParams> = (qs) => {
203204
const WrappedProductList: React.FC = () => {
204-
const { data } = ShopHooks.useProducts();
205+
const shopAPIClient = ShopHooks.useShopClient();
206+
const { data } = ShopHooks.useProducts(shopAPIClient, qs);
205207
return (
206208
<List>
207209
{data.map((product) => (

‎packages/shop/src/components/features/user_status.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ import ShopHooks from '../../hooks';
1414

1515
export const UserInfo: React.FC = () => {
1616
const formRef = React.useRef<HTMLFormElement>(null);
17-
const signInWithEmailMutation = ShopHooks.useSignInWithEmailMutation();
18-
const SignInWithSNSMutation = ShopHooks.useSignInWithSNSMutation();
19-
const signOutMutation = ShopHooks.useSignOutMutation();
17+
const shopAPIClient = ShopHooks.useShopClient();
18+
const signInWithEmailMutation = ShopHooks.useSignInWithEmailMutation(shopAPIClient);
19+
const SignInWithSNSMutation = ShopHooks.useSignInWithSNSMutation(shopAPIClient);
20+
const signOutMutation = ShopHooks.useSignOutMutation(shopAPIClient);
2021

2122
const signInWithGoogle = () =>
2223
SignInWithSNSMutation.mutate({
@@ -42,7 +43,8 @@ export const UserInfo: React.FC = () => {
4243

4344
const WrappedUserStatus: React.FC = () => {
4445
// eslint-disable-next-line react-hooks/rules-of-hooks
45-
const { data } = ShopHooks.useUserStatus();
46+
const shopAPIClient = ShopHooks.useShopClient();
47+
const { data } = ShopHooks.useUserStatus(shopAPIClient);
4648

4749
return data && data.meta.is_authenticated === true ? (
4850
<Stack>

‎packages/shop/src/hooks/index.ts‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -36,103 +36,103 @@ namespace ShopHooks {
3636
return context;
3737
}
3838

39-
const clientDecorator = <T = CallableFunction>(func:(client: ShopAPIClient) => T): T => {
39+
export const useShopClient = () => {
4040
const { shopApiDomain, shopApiCSRFCookieName, shopApiTimeout } = useShopContext();
41-
return func(new ShopAPIClient(shopApiDomain, shopApiCSRFCookieName, shopApiTimeout));
41+
return new ShopAPIClient(shopApiDomain, shopApiCSRFCookieName, shopApiTimeout);
4242
}
4343

44-
export const useUserStatus = () =>
44+
export const useUserStatus = (client: ShopAPIClient) =>
4545
useSuspenseQuery({
4646
queryKey: QUERY_KEYS.USER,
47-
queryFn: clientDecorator(ShopAPIs.retrieveUserInfo),
47+
queryFn: ShopAPIs.retrieveUserInfo(client),
4848
retry: 3,
4949
});
5050

51-
export const useSignInWithEmailMutation = () =>
51+
export const useSignInWithEmailMutation = (client: ShopAPIClient) =>
5252
useMutation({
5353
mutationKey: MUTATION_KEYS.USER_SIGN_IN_EMAIL,
54-
mutationFn: clientDecorator(ShopAPIs.signInWithEmail),
54+
mutationFn: ShopAPIs.signInWithEmail(client),
5555
meta: { invalidates: [ QUERY_KEYS.BASE ] },
5656
});
5757

58-
export const useSignInWithSNSMutation = () =>
58+
export const useSignInWithSNSMutation = (client: ShopAPIClient) =>
5959
useMutation({
6060
mutationKey: MUTATION_KEYS.USER_SIGN_IN_SNS,
61-
mutationFn: clientDecorator(ShopAPIs.signInWithSNS),
61+
mutationFn: ShopAPIs.signInWithSNS(client),
6262
meta: { invalidates: [ QUERY_KEYS.BASE ] },
6363
});
6464

65-
export const useSignOutMutation = () =>
65+
export const useSignOutMutation = (client: ShopAPIClient) =>
6666
useMutation({
6767
mutationKey: MUTATION_KEYS.USER_SIGN_OUT,
68-
mutationFn: clientDecorator(ShopAPIs.signOut),
68+
mutationFn: ShopAPIs.signOut(client),
6969
meta: { invalidates: [ QUERY_KEYS.BASE ] },
7070
});
7171

72-
export const useProducts = (qs?: ShopSchemas.ProductListQueryParams) =>
72+
export const useProducts = (client: ShopAPIClient, qs?: ShopSchemas.ProductListQueryParams) =>
7373
useSuspenseQuery({
7474
queryKey: QUERY_KEYS.PRODUCT_LIST,
75-
queryFn: () => clientDecorator(ShopAPIs.listProducts)(qs),
75+
queryFn: () => ShopAPIs.listProducts(client)(qs),
7676
});
7777

78-
export const useCart = () =>
78+
export const useCart = (client: ShopAPIClient) =>
7979
useSuspenseQuery({
8080
queryKey: QUERY_KEYS.CART_INFO,
81-
queryFn: clientDecorator(ShopAPIs.retrieveCart),
81+
queryFn: ShopAPIs.retrieveCart(client),
8282
});
8383

84-
export const useAddItemToCartMutation = () =>
84+
export const useAddItemToCartMutation = (client: ShopAPIClient) =>
8585
useMutation({
8686
mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
87-
mutationFn: clientDecorator(ShopAPIs.appendItemToCart),
87+
mutationFn: ShopAPIs.appendItemToCart(client),
8888
meta: { invalidates: [QUERY_KEYS.CART_INFO] },
8989
});
9090

91-
export const useRemoveItemFromCartMutation = () =>
91+
export const useRemoveItemFromCartMutation = (client: ShopAPIClient) =>
9292
useMutation({
9393
mutationKey: MUTATION_KEYS.CART_ITEM_REMOVE,
94-
mutationFn: clientDecorator(ShopAPIs.removeItemFromCart),
94+
mutationFn: ShopAPIs.removeItemFromCart(client),
9595
meta: { invalidates: [QUERY_KEYS.CART_INFO] },
9696
});
9797

98-
export const usePrepareOneItemOrderMutation = () =>
98+
export const usePrepareOneItemOrderMutation = (client: ShopAPIClient) =>
9999
useMutation({
100100
mutationKey: MUTATION_KEYS.ONE_ITEM_ORDER_START,
101-
mutationFn: clientDecorator(ShopAPIs.prepareOneItemOrder),
101+
mutationFn: ShopAPIs.prepareOneItemOrder(client),
102102
meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
103103
});
104104

105-
export const usePrepareCartOrderMutation = () =>
105+
export const usePrepareCartOrderMutation = (client: ShopAPIClient) =>
106106
useMutation({
107107
mutationKey: MUTATION_KEYS.CART_ORDER_START,
108-
mutationFn: clientDecorator(ShopAPIs.prepareCartOrder),
108+
mutationFn: ShopAPIs.prepareCartOrder(client),
109109
meta: { invalidates: [QUERY_KEYS.CART_INFO, QUERY_KEYS.ORDER_LIST] },
110110
});
111111

112-
export const useOrders = () =>
112+
export const useOrders = (client: ShopAPIClient) =>
113113
useSuspenseQuery({
114114
queryKey: QUERY_KEYS.ORDER_LIST,
115-
queryFn: clientDecorator(ShopAPIs.listOrders),
115+
queryFn: ShopAPIs.listOrders(client),
116116
});
117117

118-
export const useOneItemRefundMutation = () =>
118+
export const useOneItemRefundMutation = (client: ShopAPIClient) =>
119119
useMutation({
120120
mutationKey: MUTATION_KEYS.ONE_ITEM_REFUND,
121-
mutationFn: clientDecorator(ShopAPIs.refundOneItemFromOrder),
121+
mutationFn: ShopAPIs.refundOneItemFromOrder(client),
122122
meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
123123
});
124124

125-
export const useOrderRefundMutation = () =>
125+
export const useOrderRefundMutation = (client: ShopAPIClient) =>
126126
useMutation({
127127
mutationKey: MUTATION_KEYS.ALL_ORDER_REFUND,
128-
mutationFn: clientDecorator(ShopAPIs.refundAllItemsInOrder),
128+
mutationFn: ShopAPIs.refundAllItemsInOrder(client),
129129
meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
130130
});
131131

132-
export const useOptionsOfOneItemInOrderPatchMutation = () =>
132+
export const useOptionsOfOneItemInOrderPatchMutation = (client: ShopAPIClient) =>
133133
useMutation({
134134
mutationKey: MUTATION_KEYS.CART_ITEM_APPEND,
135-
mutationFn: clientDecorator(ShopAPIs.patchOrderOptions),
135+
mutationFn: ShopAPIs.patchOrderOptions(client),
136136
meta: { invalidates: [QUERY_KEYS.ORDER_LIST] },
137137
});
138138
}

0 commit comments

Comments
 (0)