In the fisrt part I ma suign fetch() and it is working fine but whe i use useSWR() it returns UNDEFINED
export const getAllEvents = async()=>{
const response = await fetch('https://*******-rtdb.firebaseio.com/events.json');
const data = await response.json();
const events = [];
for (const key in data){
events.push({
id:key,
...data[key]
});
}
return events; // returns data as I wanted.. perfect
}
but in the following snippet it returns undefined (the same url)
import useSWR from 'swr';
const {data, error} = useSWR('https://*******-rtdb.firebaseio.com/events.json');
console.log(data); // returns undefined
useSWR expects fetcher function as second argument:
https://swr.vercel.app/#overview
It can be a custom method e.g.
export const fetcher = async (...args: Parameters<typeof fetch>) => {
const res = await fetch(...args);
if (!res.ok) {
throw { status: res.status, statusText: res.statusText };
}
return res.json();
};
Use swr also needs to take a fetcher function, right now you're just passing down a url. Swr doesnt know what to do with that url..
const { data, error } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher
);
const fetcher = (url) => fetch(url).then((res) => res.json());
I suggest you read the docs.
add this :
const fetcher = (...args) => fetch(...args).then(res => res.json())
const {data, error} = useSWR('https://*******-rtdb.firebaseio.com/events.json', fetcher);
Related
I started learning Remix and got to a point where I would like to get some data from APIs. I created a loader function, in routes folder (initially I did this in component, which is wrong), where I fetch my API call:
export async function loader() {
const res = await fetch("https://reqres.in/api/users?page=2");
return json(await res.json());
}
After that I used the data in my component, where needed:
const { data } = useLoaderData();
Now I would like to use another API, but I don't know how properly to do that in the loader function
export async function loader() {
const res = await fetch("https://reqres.in/api/users?page=2");
// second API i would like to use but don't know how :(
const faqRes = await fetch("https://jsonplaceholder.typicode.com/posts");
return json(await res.json());
}
How could I use multiple APIs in Remix?
You can return more data:
export async function loader() {
const res = await fetch("https://reqres.in/api/users?page=2");
const faqRes = await fetch("https://jsonplaceholder.typicode.com/posts");
return json({
res: await res.json(),
faqRes: await faqRes.json()
});
}
Then in your component:
const { res, faqRes } = useLoaderData();
What if you want to wait for 1st API data and pass the response to 2nd API?
e.g.
export async function loader() {
const res = await fetch("https://reqres.in/api/users?page=2");
const faqRes = await fetch(`https://jsonplaceholder.typicode.com/posts/${res.userId}`);
return json({
faqRes: await faqRes.json()
});
}
I am querying some data from IPFS using axios, the problem is that after calling the specific api the return value is a promisse from axios.
const getNFTDetail = async (url: string) => {
const urlIPF = url.replace("ipfs://", "https://cloudflare-ipfs.com/ipfs/");
try {
return await axios.get(urlIPF).then((res) => {
return res.data;
});
} catch (error) {
console.log(error);
}
};
response I get:
is there a way to wait until promisse has been resolved?, as you see I am already using async await on the function call.
just, decide if you use async / await or .then / .catch:
const getNFTDetail = async (url: any) => {
const urlIPF = url.replace("ipfs://", "https://cloudflare-ipfs.com/ipfs/");
const { data } = await axios.get(urlIPF);
return data;
};
or
const getNFTDetail = (url: any) => {
const urlIPF = url.replace("ipfs://", "https://cloudflare-ipfs.com/ipfs/");
axios.get(urlIPF).then(({data}) => {
// use your data here
}).catch((err)=>{
console.log(err);
};
};
When you fetch a request, no matter any http client you use, will then return a Promise.
Just use await to get a response from your request.
const response = await axios.get(your-url);
const json = await response.json();
To use typescript correctly, type the url a string: (url: string) instead of happy any type.
I'm trying to create an API function with a help of React Query and Axios.
When I'm using useQuery with vanilla fetch function - it all works perfectly.
export const useGetDebts = async () => {
const { families } = appStore.user;
const res = useQuery("getDebts", async () => {
const res = await fetch(`${API_URL}/api/family/${families[0]}/debts`, {
method: "GET",
headers: {
Authorization: `Bearer ${appStore.token ?? ""}`,
},
});
const parsedBody: DebtsResponse = await res.json();
return parsedBody;
});
return res;
};
But when I switch the vanilla fetch function to Axios - I get an error status of 500 (not sure if it comes from React Query or Axios).
export const useGetDebts = async () => {
const { families } = appStore.user;
const res = useQuery("getDebts", async () => {
const res = await axiosInstance.get<DebtsResponse>(`/api/family/${families[0]}/debts`);
return res.data;
});
return res;
};
Thanks in advance for any explanations/suggestions.
P.s. The axiosInstance works fine with the useMutation hook. So it only makes me more confused. =(
export const useGetDebt = () => (
useMutation(async (id: number) => {
const { families } = appStore.user;
const res = await axiosInstance.get<DebtResponse>(`/api/family/${families[0]}/debts/${id}`);
return res.data;
})
);
P.s.s. I'm working with React Native if it's somehow relevant.
react-query doesn't give you any 500 errors because react-query doesn't do any data fetching. It just takes the promise returned from the queryFn and manages the async state for you.
I'm not sure if the fetch code really works because it doesn't handle any errors. fetch does not transform erroneous status codes like 4xx or 5xx to a failed promise like axios does. You need to check response.ok for that:
useQuery(['todos', todoId], async () => {
const response = await fetch('/todos/' + todoId)
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
})
see Usage with fetch and other clients that do not throw by default.
So my best guess is that the fetch example also gives you a 500 error code, but you are not forwarding that error to react-query.
So I use react-query to handle API requests. Current problem is that when i try to submit form data, post request, mutation state is always idle, and loading is always false. I also use zustand for state management.
This is useSubmitFormData hook. Post request executes as expected, just mutation status and isLoading does not get changed.
export const useSubmitFormData = () => {
const { postDataPlaceholder } = usePlaceholderApi();
// data which is submiting is getting from the store - reducer
const { data, filesToUpload } = useFormDataStore();
const { mutate, status, isLoading } = useMutation(() => postDataPlaceholder({ data }), {
onMutate: () => console.log('onMutate', status),
onSuccess: (res) => console.log(res),
onError: (err) => console.log('err', err),
});
return {
submitForm: mutate,
isLoading,
};
};
Now on FormPage.jsx it is triggered like this:
const { submitForm, isLoading } = useSubmitFormData();
const onSubmit = () => submitForm();
And this is how usePlaceholderApi looks like. It is kind of custom hook in purpose to use axios in combination with interceptors to handle authorization token.
const usePlaceholderApi = () => {
const { post } = usePlaceholderAxios();
return {
postDataPlaceholder: async (data) => post('/posts', { data }),
};
};
export default usePlaceholderApi;
And this is usePlaceholderAxios.
import axios from 'axios';
const usePlaceholderAxios = () => {
axios.interceptors.request.use(async (config) => {
const api = 'https://jsonplaceholder.typicode.com';
if (config.url.indexOf('http') === -1) {
// eslint-disable-next-line no-param-reassign
config.url = `${api}${config.url}`;
}
return config;
});
return {
get: (url, config) => axios.get(url, config),
post: (url, data, config) => axios.post(url, data, config),
};
};
export default usePlaceholderAxios;
Any ideas what could go wrong here ? Am I missing something ? Also tried to call axios directly in mutation, without usePlaceholderApi hook in between, but same outcome.
I'm trying to make a request to Firebase real-time database with useSWR in my next.js project, but for some reason it always returns null for both data and error variables.
import useSWR from 'swr';
const LastSales: NextPage = () => {
const [sales, setSales] = useState<Sale[]>([]);
const { data, error } = useSWR(
'https://my-app-12345-default-rtdb.firebaseio.com/sales.json'
);
useEffect(() => {
if (!data) return;
const salesArr = [];
for (const key in data) {
salesArr.push({
id: key,
username: data[key].username,
volume: data[key].volume,
});
}
setSales(salesArr);
}, [data]);
if (error) return <p>Failed to load.</p>;
if (sales.length === 0) return <p>Loading...</p>;
return <div>Sales List</div>
Making the same request with fetch works perfectly fine, but takes up 10x as many lines of code. Why are both data and error equal to null?
According to doc, you need to have a fetcher to define how it will be called.
const fetcher = (url) => fetch(url).then((res) => res.json());
export default function App() {
const { data, error } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher
);