From the docs, this is how you fetch data, but since it's outside the function, how do I track the loading state so users can know when a data section is loading.
async function getData() {
const res = await fetch('https://api.example.com/...');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Page() {
const data = await getData();
return <main></main>;
}
You can use custom hooks for that:
useData.js
async function useData() {
const [loading, setLoading] = useState(true)
cost [error, setError] = useState(false)
const [data, setData] = useState()
useEffect(() => {
const fetchData = async () => {
setLoading(true)
const res = await fetch('https://api.example.com/...');
if (!res.ok) {
setError(true)
return
}
setError(false)
setLoading(false)
setData(res.json())
}
fetchData()
}, [])
return {loading, error, data}
}
//page
export default function Page() {
const {data, loading, error} = useData();
if(loading){ return <p>Loading...</p>}
if(error){ return <p>Error...</p>}
if(!data){ return <p>No data!!!</p>}
return <main></main>;
}
Later, you can set up your hook to use an uri param so you can reuse this hook in multiple pages.
Related
// get data from server using getstatic props
export async function getStaticProps() {
const res = await axios.get("https://pharmaadmin.touchmediaads.com/api/dossier-formats")
console.log(res)
const data = res.data
console.log(data)
return {
props: {
data
},
}
}
What's the problem here??
When trying to get data in next js, the server does not return anything at all, the console is empty, tell me, please, what could be wrong?
export const getStaticProps = async () => {
const res = await fetch('https://api.jikan.moe/v4/top/manga');
const data = await res.json();
console.log('data >>>', data);
return {
props: {
manga: data,
},
};
};
How do I get all the comments from the subcollection?
This is mine reusable function to get comments collection.
import { ref, watchEffect } from 'vue';
import { projectFirestore } from '../firebase/config';
const getCollection = (collection, id, subcollection) => {
const comments = ref(null);
const error = ref(null);
// register the firestore collection reference
let collectionRef = projectFirestore
.collection(collection)
.doc(id)
.collection(subcollection);
const unsub = collectionRef.onSnapshot(
snap => {
let results = [];
snap.docs.forEach(doc => {
doc.data().createdAt && results.push(doc.data());
});
// update values
comments.value = results;
error.value = null;
},
err => {
console.log(err.message);
comments.value = null;
error.value = 'could not fetch the data';
}
);
watchEffect(onInvalidate => {
onInvalidate(() => unsub());
});
return { error, comments };
};
export default getCollection;
And this is mine Comments.vue where i passing arguments in setup() function (composition API)
const { comments } = getAllComments('posts', props.id, 'comments');
When i console.log(comments) its null, in snapshot doc.data() is good but somehow results too is empty array even if i push doc.data() to results array and pass it to comments.value.
Can someone help me how to get that subcollection?
This is my Comment.vue component
export default {
props: ['id'],
setup(props) {
const { user } = getUser();
const content = ref('');
const { comments } = getAllComments('posts', props.id, 'comments');
const ownership = computed(() => {
return (
comments.value && user.value && user.value.uid == comments.value.userId
);
});
console.log(comments.value);
}
return { user, content, handleComment, comments, ownership };
},
};
const getCollection = (collection, id, subcollection) => {
const comments = ref(null);
const error = ref(null);
// Firestore listener
return { error, comments };
}
The initial value of comments here is null and since Firebase operations are asynchronous, it can take a while before the data loads and hence it'll log null. If you are using comments in v-for then that might throw an error.
It'll be best if you set initial value to an empty array so it'll not throw any error while the data loads:
const comments = ref([]);
Additionally, if you are fetching once, use .get() instead of onSnapshot()
I'm playing around with nextjs
and I've trouble to debug a function like
this:
export const authInitialProps = isProtectedRoute => {
console.log("mylog");// this works
return ({ req, res }) => {
console.log("inner my log", req); // this doesn't work
};
};
Using in a page
ProfilePage.getInitialProps = async () => {
const auth = authInitialProps(true);
if (!typeof auth === "function") {
const user = await getUserProfile();
return { user };
}
return { user: null };
};
I never see "inner my log" both in chrome console
and in my console terminal.
What's the problem please?
Try this It may work:
ProfilePage.getInitialProps = async () => {
const auth = await authInitialProps(true); // await added
if (!typeof auth === "function") {
const user = await getUserProfile();
return { user };
}
return { user: null };
};
I think it should be async to not pass over it!
I have this action in userActions.js:
const receiveFilialData = (data) => {
return {
type: "RECEIVE_FILIAL_DATA",
payload: data
}
}
export default {
receiveFilialData
}
In my login component, I'm making a dispatch to get some data from a saga:
const Login = props => {
const dispatch = useDispatch()
const filiais = useSelector(state => state.filiais)
useEffect(() => {
dispatch({type: 'GET_FILIAIS_REQUEST'})
}, [dispatch, filiais])
}
In LoginService.js I'm making the HTTP request:
const fetchFiliais = async () => {
const response = await fetch(`${baseUrlApi.baseUrlApi}/filiais`);
const responseJson = await response.json()
return responseJson
}
export default {
fetchFiliais
}
And I create a saga to make this request when there's a GET_FILIAIS_REQUEST dispatch:
// worker Saga: will be fired on GET_FILIAIS_REQUEST actions
function* fetchFiliais(action) {
try {
const data = yield call(LoginService.fetchFiliais())
console.log(data)
yield put({type: "RECEIVE_FILIAL_DATA", data});
} catch (e) {
yield put({type: 'FETCH_FILIAIS_FAILED', message: e.message})
}
}
/*
Starts fetchFiliais on each dispatched `GET_FILIAIS_REQUEST` action.
*/
function* mySaga() {
yield takeEvery("GET_FILIAIS_REQUEST", fetchFiliais);
}
If I put a console.log(response.json) in the LoginService file, fetchFiliais is printing my response, but my console.log(data) after yield call() is not running; the control flow is going to catch(e) and throwing:
type: "FETCH_FILIAIS_FAILED" message: "call: argument of type
{context, fn} has undefined or null fn"
Why?
Fixed, putting LoginService.fetchFiliais instead LoginService.fetchFiliais())
This is not a function but a const