Skip to content

Commit 834b572

Browse files
pooriasetpooriaset
committed
refactor: separate methods of the graphql client
1 parent 4af7eb1 commit 834b572

File tree

5 files changed

+116
-109
lines changed

5 files changed

+116
-109
lines changed

‎src/components/Icons/components/Use/ToomanIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const ToomanIcon = () => {
66
style={{
77
width: 18,
88
height: 18,
9-
fill: 'var(--color-icon-low-emphasis)',
9+
fill: 'var(--color-icon-medium-emphasis)',
1010
}}
1111
>
1212
<use xlinkHref="#tooman"></use>

‎src/components/common/PriceLabel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const PriceLabel: FC<PriceLabelProps> = ({
1717
value,
1818
TypographyProps = {
1919
sx: {
20-
fontWeight: 300,
20+
fontWeight: 600,
2121
},
2222
},
2323
suffix,
@@ -31,7 +31,7 @@ const PriceLabel: FC<PriceLabelProps> = ({
3131
: value;
3232

3333
return (
34-
<Stack alignItems="center" spacing={0.25} direction="row">
34+
<Stack alignItems="center" spacing={1 / 8} direction="row">
3535
{prefix}
3636
<Typography {...TypographyProps}>{_value?.toLocaleString()}</Typography>
3737
<PriceUnit title={<ToomanIcon />} TypographyProps={TypographyProps} />

‎src/config/theme.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const globalStyles: GlobalStylesProps['styles'] = (theme) => ({
1717
'--swiper-navigation-color': '#fff',
1818
'--swiper-navigation-size': 28,
1919
'--color-icon-low-emphasis': theme.palette.grey[500],
20+
'--color-icon-medium-emphasis': theme.palette.grey[800],
2021
'--toastify-font-family': theme.typography.fontFamily,
2122
},
2223
'.swiper-button-next,.swiper-button-prev': {

‎src/graphql/clients/clientSideMakeClient.ts‎

Lines changed: 7 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,17 @@
1-
import { ApolloLink, HttpLink, from } from '@apollo/client';
1+
import { from } from '@apollo/client';
22
import {
33
NextSSRApolloClient,
44
NextSSRInMemoryCache,
55
SSRMultipartLink,
66
} from '@apollo/experimental-nextjs-app-support/ssr';
7-
8-
import { getSessionToken } from '@/services/common';
9-
import { setContext } from '@apollo/client/link/context';
10-
import { onError } from '@apollo/client/link/error';
11-
import { Observable } from '@apollo/client/utilities';
12-
import { toast } from 'react-toastify';
13-
14-
const createSessionLink = () => {
15-
return setContext(async () => {
16-
const headers: Record<string, string> = {};
17-
const sessionToken = await getSessionToken();
18-
19-
if (sessionToken) {
20-
headers['woocommerce-session'] = `Session ${sessionToken}`;
21-
22-
return { headers };
23-
}
24-
25-
return {};
26-
});
27-
};
28-
29-
const updateLink = new ApolloLink((operation, forward) => {
30-
return forward(operation).map((response) => {
31-
const context = operation.getContext();
32-
const {
33-
response: { headers },
34-
} = context;
35-
const oldSessionToken = localStorage.getItem(
36-
process.env.NEXT_PUBLIC_WOOCOMMERCE_SESSION_KEY as string,
37-
);
38-
const sessionToken = headers.get('woocommerce-session');
39-
if (sessionToken) {
40-
if (oldSessionToken !== sessionToken) {
41-
localStorage.setItem(
42-
process.env.NEXT_PUBLIC_WOOCOMMERCE_SESSION_KEY as string,
43-
sessionToken,
44-
);
45-
}
46-
}
47-
48-
return response;
49-
});
50-
});
51-
52-
const createErrorLink = () => {
53-
return onError(({ graphQLErrors, operation, forward }) => {
54-
const targetErrors = [
55-
'The iss do not match with this server',
56-
'invalid-secret-key | Expired token',
57-
'invalid-secret-key | Signature verification failed',
58-
'Expired token',
59-
'Wrong number of segments',
60-
];
61-
let observable;
62-
63-
if (graphQLErrors?.length) {
64-
graphQLErrors.map(({ originalError, message }) => {
65-
if (
66-
targetErrors.includes(message) ||
67-
targetErrors.includes(originalError?.message ?? '')
68-
) {
69-
observable = new Observable((observer) => {
70-
getSessionToken(true)
71-
.then((sessionToken) => {
72-
operation.setContext(({ headers = {} }) => {
73-
const nextHeaders: Record<string, string> = headers;
74-
75-
if (sessionToken) {
76-
nextHeaders[
77-
'woocommerce-session'
78-
] = `Session ${sessionToken}`;
79-
} else {
80-
delete nextHeaders['woocommerce-session'];
81-
}
82-
83-
return {
84-
headers: nextHeaders,
85-
};
86-
});
87-
})
88-
.then(() => {
89-
const subscriber = {
90-
next: observer.next.bind(observer),
91-
error: observer.error.bind(observer),
92-
complete: observer.complete.bind(observer),
93-
};
94-
forward(operation).subscribe(subscriber);
95-
})
96-
.catch((error) => {
97-
observer.error(error);
98-
});
99-
});
100-
} else {
101-
toast.error(message);
102-
}
103-
});
104-
}
105-
return observable;
106-
});
107-
};
7+
import {
8+
createErrorLink,
9+
createSessionLink,
10+
httpLink,
11+
updateLink,
12+
} from '../utils';
10813

10914
export const makeClient = () => {
110-
const httpLink = new HttpLink({
111-
uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
112-
});
113-
11415
return new NextSSRApolloClient({
11516
connectToDevTools: true,
11617
cache: new NextSSRInMemoryCache(),

‎src/graphql/utils.ts‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { getSessionToken } from '@/services/common';
2+
import { ApolloLink, HttpLink } from '@apollo/client';
3+
import { setContext } from '@apollo/client/link/context';
4+
import { onError } from '@apollo/client/link/error';
5+
import { Observable } from '@apollo/client/utilities';
6+
import { toast } from 'react-toastify';
7+
8+
export const httpLink = new HttpLink({
9+
uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
10+
});
11+
12+
export const createSessionLink = () => {
13+
return setContext(async () => {
14+
const headers: Record<string, string> = {};
15+
const sessionToken = await getSessionToken();
16+
17+
if (sessionToken) {
18+
headers['woocommerce-session'] = `Session ${sessionToken}`;
19+
20+
return { headers };
21+
}
22+
23+
return {};
24+
});
25+
};
26+
27+
export const updateLink = new ApolloLink((operation, forward) => {
28+
return forward(operation).map((response) => {
29+
const context = operation.getContext();
30+
const {
31+
response: { headers },
32+
} = context;
33+
const oldSessionToken = localStorage.getItem(
34+
process.env.NEXT_PUBLIC_WOOCOMMERCE_SESSION_KEY as string,
35+
);
36+
const sessionToken = headers.get('woocommerce-session');
37+
if (sessionToken) {
38+
if (oldSessionToken !== sessionToken) {
39+
localStorage.setItem(
40+
process.env.NEXT_PUBLIC_WOOCOMMERCE_SESSION_KEY as string,
41+
sessionToken,
42+
);
43+
}
44+
}
45+
46+
return response;
47+
});
48+
});
49+
50+
export const createErrorLink = () => {
51+
return onError(({ graphQLErrors, operation, forward }) => {
52+
const targetErrors = [
53+
'The iss do not match with this server',
54+
'invalid-secret-key | Expired token',
55+
'invalid-secret-key | Signature verification failed',
56+
'Expired token',
57+
'Wrong number of segments',
58+
];
59+
let observable;
60+
61+
if (graphQLErrors?.length) {
62+
graphQLErrors.map(({ originalError, message }) => {
63+
if (
64+
targetErrors.includes(message) ||
65+
targetErrors.includes(originalError?.message ?? '')
66+
) {
67+
observable = new Observable((observer) => {
68+
getSessionToken(true)
69+
.then((sessionToken) => {
70+
operation.setContext(({ headers = {} }) => {
71+
const nextHeaders: Record<string, string> = headers;
72+
73+
if (sessionToken) {
74+
nextHeaders[
75+
'woocommerce-session'
76+
] = `Session ${sessionToken}`;
77+
} else {
78+
delete nextHeaders['woocommerce-session'];
79+
}
80+
81+
return {
82+
headers: nextHeaders,
83+
};
84+
});
85+
})
86+
.then(() => {
87+
const subscriber = {
88+
next: observer.next.bind(observer),
89+
error: observer.error.bind(observer),
90+
complete: observer.complete.bind(observer),
91+
};
92+
forward(operation).subscribe(subscriber);
93+
})
94+
.catch((error) => {
95+
observer.error(error);
96+
});
97+
});
98+
} else {
99+
toast.error(message);
100+
}
101+
});
102+
}
103+
return observable;
104+
});
105+
};

0 commit comments

Comments
 (0)