Implement updated fetch api for using Next.js
λ΄λΆ μ½λλ₯Ό λ³΄κ³ μΆμΌμλ€λ©΄, ν΄λΉ μ£Όμλ‘ μ μν΄ μ£ΌμΈμ! core.ts
νμΌμ΄ λ©μΈ λ‘μ§μ
λλ€.
https://github.com/kokyusik91/kofetch
ν΄λΉ νλ‘μ νΈλ λ Έλ λ²μ 20.4.0μμ λ§λ€μ΄ μ‘μ΅λλ€. Node, NPMμμ λ Έλλ₯Ό μ€μΉν΄ μ£ΌμΈμ.
$ npm -v && node -v
v20.4.0
npmμ μ¬μ©νλ€λ©΄ λ€μ λͺ λ Ήμ΄λ₯Ό μ€νν΄ μ£ΌμΈμ.
$ npm install -i kofetch
yarnμ μ¬μ©νλ€λ©΄ λ€μ λͺ λ Ήμ΄λ₯Ό μ€νν΄ μ£ΌμΈμ.
$ yarn add kofetch
λ³΄ν΅ λ°μ΄ν°λ₯Ό νμΉνλλ° λ§μ΄ μ¬μ©λλ axios λΌμ΄λΈλ¬λ¦¬μ λΉμ·νκ² μ¬μ©κ°λ₯νλλ‘ κ°λ° νμμ΅λλ€.
// μ무 μ΅μ
μ λκΈ°μ§ μμλ μ¬μ©κ°λ₯ν©λλ€!
const fetchInstance = Kofetch.create({});
create λ©μλμ μΈμλ‘ λκΈΈ μ μλ νλ‘νΌν° κ°μ²΄ Options
μ
λλ€.
νλ¨μλ μ£Όμ νλ‘νΌν°λ€μ νμ
μ
λλ€.
baseUrl
: κΈ°λ³Έμ΄ λλ url μ λλ€.(optional)
Type | Default value |
---|---|
string | '' |
config
: μ¬λ¬κ°μ§ config λ€μ΄ ν¬ν¨λ©λλ€.(optional)
- RequestInit : μμ²μ 보λΌλ ν¬ν¨ μν¬ μ μλ λ©ν μ λ³΄λ€ (
headers
,body
,cache
, etc ) - interceptor : μΈν° μ ν° ν¨μλ€λ‘ μ΄λ£¨μ΄μ§ κ°μ²΄μ λλ€.
- next.js revalidate μ΅μ
: next.jsμμ μ 곡νλ
revalidate
μ΅μ μ΄ ν¬ν¨λ©λλ€.
- RequestInit : μμ²μ 보λΌλ ν¬ν¨ μν¬ μ μλ λ©ν μ λ³΄λ€ (
Type | Default value |
---|---|
NextCustomHeaderConfig | {} |
μμ) μ¬λ¬κ°μ§ config μ΅μ λ€μ λ£λ μμμ λλ€. (μλ μμ μ°Έκ³ μ next.jsμμ μ 곡νλ revalidate κ°μ²΄λ λ£μ μ μμ΅λλ€. )
const fetchInstance = Kofetch.create({
baseUrl: "",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
cache: "force-cache",
next: { revalidate: 30 },
// μΈν°μ
ν° κ°μ²΄
interceptor: {
beforeRequestHandler: beforereq,
requestOnFailHandler: requestFail,
responseOnSuccessHandler: handleResponseSuccess,
responseOnFailHandler: handleResponseError,
},
});
2. μΈμ€ν΄μ€λ₯Ό μμ±νλ€λ©΄, μ΄μ http λ©μλ κΈ°λ°μΌλ‘ μμ²μ λ³΄λΌ μ μμ΅λλ€.
μμ) κΈ°λ³Έμ μΈ get
μμ²μ
λλ€.
-
μ λ€λ¦
μΌλ‘ μλ΅λ°μ ννμ λ°μ΄ν° νμ μ λκ²¨μ€ μ μμ΅λλ€. -
μΆκ°μ μΌλ‘ κ°λ³ μμ²λ§λ€
config
κ° λ€μ λκΈΈ μ μμ΅λλ€. (λμ μ configλ μΈλ²μ§Έ μΈμμ΄κΈ° λλ¬Έμ, getμμ²μ params μ΄λ, post μμ²μ requset body, κ° μλ€λ©΄, λΉ κ°μ²΄λ‘ 2λ²μ§Έ μΈμλ₯Ό μ±μμ€μΌν©λλ€ π₯²) -
μλ΅ λ°μ λ°μ΄ν°λ λ΄λΆμμ
.json()
λ‘ κ°μ²΄ν λκΈ° λλ¬Έμ λ°νλλ responseμ λ³λμ μ²λ¦¬λ₯Ό μν΄μ€λ λ©λλ€.
try {
const response = await fetchInstance.get<TODO>(
"https://jsonplaceholder.typicode.com/todos/1",
// paramsκ° λ€μ΄μ¬ μ리
{},
// μΆκ° config μ΅μ
κ°μ²΄
{ next: { revalidate: 3000 } }
);
console.log(response);
} catch (error) {
console.log("λ€νΈμν¬ μμ² μ€ν¨ μλ¬", error);
}
- get μμ²μ κ²½μ° λ°μ΄ν°λ
쿼리 μ€νΈλ§
ννλ‘ μ λ¬λ©λλ€. νμ§λ§ μ§μ query-string
ννλ‘ λκΈΈνμμμ΄, λ°±μλμ μ λ¬ν λ°μ΄ν°λ₯Ό κ°μ²΄ννλ‘ λ겨주면 λ΄λΆμμquery-string
μΌλ‘ λ³νλ μμ²μ endpoint λ€μ λΆμ°©λ©λλ€. (μνμ λ€λ©΄ paramsκ°μ²΄λ₯Ό λκΈ°μ§ λ§κ³ , μ§μ endpointμ μ§μ query-string
μ λͺ μνμ λ λ©λλ€!)
// get μμ²μ μ¬μ©λλ 쿼리 νλΌλ―Έν° => λ΄λΆμμ ?gender=male&height=186 μΌλ‘ λ³κ²½λ¨
const queryParams = {
gender: "male",
height: 186,
};
try {
const response = await fetchInstance.get<TODO>(
"https://jsonplaceholder.typicode.com/todos/1",
params : queryParams
);
console.log(response);
} catch (error) {
console.log("λ€νΈμν¬ μμ² μ€ν¨ μλ¬", error);
}
- post, put, patchμ κ²½μ° λ°μ΄ν°λ JSON κ°μ²΄λ‘ μ λ¬λ©λλ€. 2λ²μ§Έ μΈμλ‘ λ°±μλμ λκΈΈ λ°μ΄ν°λ₯Ό λ겨주면 λ©λλ€. λ΄λΆμμ
JSON.stringify()
λ‘ μ§λ ¬ν μν€κΈ° λλ¬Έμ λ³λ μ²λ¦¬λ₯Ό μν΄μ€λ λ©λλ€.
// post μμ²μ μ¬μ©λλ request body
const requstBody = {
age: 28,
like: false,
};
try {
const response = await fetchInstance.get<TODO>(
"https://jsonplaceholder.typicode.com/todos/1",
data : requstBody
);
console.log(response);
} catch (error) {
console.log("λ€νΈμν¬ μμ² μ€ν¨ μλ¬", error);
}
- delete μμ²μ λκ²
path parameter
λ‘ λ°μ΄ν°λ₯Ό μ λ¬νλ―λ‘, μΆκ° request bodyλ₯Ό λ°μ§λ μμ΅λλ€.
- axiosμλ κΈ°λ³Έμ μΌλ‘ api interceptorκ° κΈ°λ³Έμ μΌλ‘ ꡬνμ΄ λμ΄μμ§λ§, fetch apiλ ν΄λΉ κΈ°λ₯μ΄ μμ΅λλ€. νμ§λ§ fetchλ₯Ό νλ² wrappingν
kofetch
λ΄λΆμλ interceptorκ° λ΄μ₯λμ΄μμ΅λλ€. - axiosμμμ λ§μ°¬κ°μ§λ‘ μ΄ 4κ°μ§ μμ μ
interceptor handler
κ° κ΅¬μ±λ©λλ€.- μμ² μ§μ μννλ ν¨μ
beforeRequestHandler
- μμ² μ€ν¨μ μνλλ ν¨μ
requestOnFailHandler
(μ£Όλ‘ λ€νΈμν¬ μλ¬μ μ€νλ¨) - μλ΅ μ±κ³΅μ μνλλ ν¨μ
responseOnSuccessHandler
- μλ΅ μ€ν¨μ μνλλ ν¨μ
responseOnFailHandler
- μμ² μ§μ μννλ ν¨μ
- κ° ν¨μμ μ€ν μμ μ
kofetch
λ΄λΆμμ μνλ©λλ€.
μ¬μ©μλ ν΄λΉ ν¨μμ μ€ν μμ μ μ κ²½μΈ νμμμ΄, ν΄λΉ μμ μ μννκ³ μΆμ μ½λ°±ν¨μλ§ μ μΈνκ³ λκΈ°λ©΄ λ©λλ€. - μΈν°μ
ν°λ
μ΅μ λ
μ΄κΈ° λλ¬Έμ λ£μ§ μμλ λμνλλ° λ¬Έμ κ° μμ΅λλ€. - μΆκ°λ‘ μμ²μ μ μ€νλλ ν¨μμΈ
beforeRequestHandler
μμ μ§μ configλ₯Ό μ‘°μν μ μμ΅λλ€. μλ₯Όλ€μ΄ request headerμ Authorizationμ tokenμ μ½μ νλ, λ±μ μ€ν ν μ μμ΅λλ€. μμ² μ μ μ€ννκ³ , κ·Έλ€μμ fetch ν¨μκ° μ€νλ©λλ€.
// κ° μμ μ μ¬μ©λ μ½λ°± ν¨μλ₯Ό μ μΈν©λλ€.
const beforereq = (config: NextCustomHeaderConfig) => {
console.log("μμ²μ μΈν°μ
ν° νΈλ€λ¬ μ€ν!");
return config;
};
const requestFail = (error: any) => {
console.log("μμ² μ€ν¨ νμλ μΈν°μ
ν° νΈλ€λ¬ μ€ν!");
return Promise.reject(error);
};
const responsefail = (error: any) => {
console.log("μλ΅ μ€ν¨ νμλ μΈν°μ
ν° νΈλ€λ¬ μ€ν!");
return Promise.reject(error);
};
const responseSuccess = (res: Promise<any>) => {
console.log("μλ΅ μ±κ³΅νμλ μΈν°μ
ν° νΈλ€λ¬ μ€ν!");
return res;
};
// interceptor μ¬μ©μμ
const fetchInstance = Kofetch.create({
baseUrl: "",
interceptor: {
beforeRequestHandler: beforereq,
requestOnFailHandler: requestFail,
responseOnSuccessHandler: responseSuccess,
responseOnFailHandler: responsefail,
},
});
axiosμμλ HTTPμμ²μ μλ΅μ΄ μ€ν¨νμλ, AxiosError
νμ
μ κ°μ²΄λ₯Ό μ체μ μΌλ‘ μμ±νμ¬, μλ΅ μλ¬κ°μ²΄λ₯Ό λμ§λλ€. μ΄μ λ§μ°¬κ°μ§λ‘ koFetchμμλ νμ¬ λ΄λΆμμ μ체μ μΌλ‘ μλ¬ dtoκ°μ²΄λ₯Ό μμ±νμμ΅λλ€. νμ¬ κ΅¬μ±λμλ μλ¬ dto κ°μ²΄
λ λ€μκ³Ό κ°μ΅λλ€. (μλ¬ κ°μ²΄ λ΄λΆλ μΆν κ³ λν μμ μ
λλ€ π
)
{
stausCode, // μλ¬ statusCode
name, // μλ¬ μ΄λ¦
responseDto, // λ°±μλμ μλ¬ μλ΅ κ°μ²΄
requestUrl, // μμ² url
requestheaders, // μμ²μ ν¬ν¨λ header
message, // μλ¬ λ©μμ§
}
νμ¬λ Kofetch
μΈμ€ν΄μ€λ₯Ό μμ±ν λ μΈν°μ
ν° κ°μ²΄ μμ κ° μμ μ λ§λ ν¨μλ€μ λ£μ΄ μ£ΌκΈ°λ§ νλ©΄λ©λλ€. κ°λ³ μμ²λ§λ€ μΈν°μ
ν°λ₯Ό μΆκ°νλ κΈ°λ₯μ μΆν κ°λ°λ μμ μ
λλ€. λ§μ½ μ§κΈ λΉμ₯ μ¬λ¬ μΈν°μ
ν°κ° νμν μν©μ΄λΌλ©΄, μλ‘μ΄ Kofetch μΈμ€ν΄μ€λ₯Ό λ§λ€κ³ , κ·Έ μΈμ€ν΄μ€λ₯Ό μ¬μ©ν΄μ£ΌμΈμ!
νμ¬ νμ κΈ°λ₯λ€λ§ μΆκ°νμ¬ μ§νν μνμ λλ€. μμ§μ λΆμμ νλ μ¬μ©μ μ§μ π« ν΄μ£ΌμΈμ! νμ¬ κΈ°μ€μΌλ‘ κ°λ₯ν κΈ°λ₯λ€ μ λλ€.
- κΈ°λ³Έμ μΈ http μμ² μλ΅ κ°λ₯ (get, post, put, patch, delete) β
- μ΅μ΄, fetch instance λ§λ€λ λΆν° config(header, interceptor, cache λ±λ±) μ½μ ν μ μμ΄μΌν¨. β
- κ° μμ²λ§λ€ μ¬μ©μκ° νμν λ config λ£μ μ μκ² λ§λ¬. β
- response type μ λ€λ¦μΌλ‘ λκΈΈ μ μμ.
- μμ² λ³΄λΌλ, json stringify, μλ΅λ°μλ json Parse μ²λ¦¬. β
- configμ nextμμ μ 곡νλ revalidate νλ‘νΌν°λ₯Ό λκΈΈ μ μκ² λ§λ¬. β
- interceptor μ΄ 4κ°μ§ μμ νΈλ€λ§ (μμ²μ , μμ²μ€ν¨, μλ΅μ±κ³΅, μλ΅μ€ν¨) β
- axios μ²λΌ, μμ²κ°μ²΄λ₯Ό κ°μ Έμ¬ μ μμ΄μΌνλ€ β
- μλ¬ νμ κ°μ (λ΄λΆ)
- μΈν°μ ν°λ₯Ό κ° μμ²λ§λ€ μ§μ 컨νΈλ‘€ ν μ μλλ‘ λ§λ€μ΄μΌν¨.
- refresh token λ‘μ§ λμλλμ§ νμΈ
- kofetch λ΄λΆμ typeλ€μ λ³λμ
type.ts
νμΌλ‘ λΆλ¦¬νμμ΅λλ€. - kofetch λ΄λΆμ μ¬μ©λ λͺ¨λ νμ λ€μ kofetch ν¨ν€μ§μ ν¬ν¨λμ΄μ Έ μμΌλ―λ‘, import ν΄μ μ¬μ©νλ©΄ λ©λλ€.