Is there a alternative for "axios" and "fetch"?
Answered
Scaly-naped Pigeon posted this in #help-forum
Scaly-naped PigeonOP
##
can't use
##
no interceptor
no baseUrl
Please recommend me the alternative thing
axios problemcan't use
next option##
fetch problemno interceptor
no baseUrl
Please recommend me the alternative thing
Answered by Ray
btw, you should use fetch
you could create a helper function which set the baseUrl.
for interceptos, which can be easily implemented as small, reusable functions that you can apply to response objects.
you could create a helper function which set the baseUrl.
for interceptos, which can be easily implemented as small, reusable functions that you can apply to response objects.
26 Replies
Scaly-naped PigeonOP
Is it possible to use ky in Server Component?
@Scaly-naped Pigeon Is it possible to use ky in Server Component?
sure but not the revalidate and tag
Scaly-naped PigeonOP
umm.. how to resolve this problem?
btw, you should use fetch
you could create a helper function which set the baseUrl.
for interceptos, which can be easily implemented as small, reusable functions that you can apply to response objects.
you could create a helper function which set the baseUrl.
for interceptos, which can be easily implemented as small, reusable functions that you can apply to response objects.
Answer
Scaly-naped PigeonOP
i try it!
async function fetchAPI(url: string, options?: RequestInit) {
const apiUrl = `https://api.example.com${url}`
return fetch(apiUrl, options)
}Scaly-naped PigeonOP
I want to automatically add accessToken in helper function
Is there any way to resolve it?
Is there any way to resolve it?
function ClientComponent() {
const accessToken = useRecoilValue(accessTokenState);
fetch(url, {
headers: {
Authorization: `bearer ${accessToken}`
}
});
}import { cookies } from 'next/headers';
function ServerComponent() {
const cookieStore = cookies();
const accessToken = cookieStore.get('accessToken');
fetch(url, {
headers: {
Authorization: `bearer ${accessToken}`
}
});
}@Scaly-naped Pigeon I want to automatically add accessToken in helper function
Is there any way to resolve it?
tsx
function ClientComponent() {
const accessToken = useRecoilValue(accessTokenState);
fetch(url, {
headers: {
Authorization: `bearer ${accessToken}`
}
});
}
tsx
import { cookies } from 'next/headers';
function ServerComponent() {
const cookieStore = cookies();
const accessToken = cookieStore.get('accessToken');
fetch(url, {
headers: {
Authorization: `bearer ${accessToken}`
}
});
}
no its better to pass it yourself.
because you can't access server api in client and you can't access browser api/react hook on server
because you can't access server api in client and you can't access browser api/react hook on server
or create two helper function for client and server
eg. clientFetch, serverFetch
eg. clientFetch, serverFetch
but I don't know if you can call
useRecoilValue in the functionScaly-naped PigeonOP
what do you think to use
document.cookie in clientFetch?instead of useRecoilValue
@Scaly-naped Pigeon what do you think to use `document.cookie` in clientFetch?
yes you could do that if your cookie is not httponly
Scaly-naped PigeonOP
umm .. my cookie is httponly TT
who set the cookie? when you make the request on browser, it should send the cookies along with the request
Scaly-naped PigeonOP
backend server set the accessToken and refreshToken
then you don't need to pass the value on clientFetch
it should send with the cookie
Scaly-naped PigeonOP
ah~
but the backend need to check the token in cookie instead of header
Scaly-naped PigeonOP
umm..?
then what should I do? TT
then what should I do? TT
I'm not 100% sure, try to make a fetch request on the client and see what you get
Scaly-naped PigeonOP
okay Thank you! I love you
â¤ï¸
np