React Query - useQuery returns undefined - onClick - javascript

I have following hook which handle all query:
const useUsers = (userId: number) => {
const { data: user } = useQuery([QUERY.USERS, userId], () => getUser(userId))
return {
user
}
}
export const getUser = async (userId) => {
try {
const { data } = await fetch(`path/path/${userId}`)
return data;
} catch (e) {
throw new Error('Something went wrong');
}
}
Now in my main component I invoke this hook:
const [userId, setUserId] = useState(null)
const { user } = useUsers(userId);
Also I have a list of user. When I click on user I am setting userId by (setUserId). OnClick Function looks like this:
const handleUserDetails = (userId) => {
setUserId(userId);
console.log(user) // undefined
}
My problem is when I click I got undefined.
Only the second click returns the correct data

The user object is undefined because when you change the userId state, by calling setUserId(userId), a new fetch request is being triggered. Immediately, without waiting, you are calling console.log(user). And because the fetch request hasn't completed yet, the user object is still undefined.
When you click the button again, if the userId is the same as it was on the first click, the user object won't be (probably) undefined because the fetch request has completed and that's the cached value of the user object being displayed.
In order to be able to access the user object immediately after the request completes, you can use the useEffect hook and put user in its dependency list:
useEffect(() => {
// console.log only if user is defined
if (user) {
console.log("User won't be undefined here ", user);
}
}, [user]);
Here's a Codesandbox sample of what I exactly mean

Related

React state not being changed after passed down from parent

I a setState function being passed down from a parent component, I want to setTheState of the parent setter if the enterKey is pressed. Though, when I set the state nothing happens and I'm still left with an empty array
Here's the code snippet
const { check, setCheck } = props // receive from props
const callApi = async (onEnter) => {
const res = await callFunction('', data)
if (res) {
setResults(res)
if (onEnter) {
setCheck(res)
console.log('check', check) // returns []
}
}
Returns [] when I log in parent as well
Instead of console logging it immediately, wait for it to change, because it's an async operation. You can wrap your log in a useEffect:
useEffect(() => {
console.log(check);
}, [check]);

Apollo-client useLazyQuery returning undefined on refetch

I have a subcomponent Viewer that uses a refetch function passed down to its parent Homescreen.
The lazyQuery in homescreen is structured as follows:
const [getById, {loading, error, data, refetch}] = useLazyQuery(GET_BY_ID);
This will get an object from my mongoDB by its id, and when I need to call it again and reload data into my custom activeObject variable, I use the follow function:
const refetchObjects= async () => {
const {loading, error, data } = await refetch();
if (error) { console.log(error);}
if (data) {
activeObject = data.getRegionById;
}
}
However, sometimes the return object of await refetch(); is undefined and I'm not sure why.

How to return something conditionally based off the result of a firebase query? [duplicate]

I have two tables in Firebase: Vouchers & ClaimedVouchers. I am trying to display the vouchers that do not appear in the ClaimedVouchers table. So, I have a query that gets all of the vouchers, then another that checks if they're claimed and if it's claimed or not the function should return either true or false:
This is isClaimedAPI.js
export default () => {
var result;
async function isClaimed(voucher, user) {
var db = Firebase.firestore();
console.log("voucher");
await db
.collection("ClaimedVoucher")
.where("voucherID", "==", voucher)
.where("userID", "==", user)
.get()
.then(function (querySnapshot) {
if (querySnapshot.empty === false) {
result = true;
} else {
result = false;
}
})
.catch(function (error) {
console.log("Error getting documents: ", error);
});
console.log(result, "this is result");
return result;
//Call when component is rendered
useEffect(() => {
isClaimed().then((result) => setResult(result));
}, []);
return [isClaimed];
And then in my main function:
var user = Firebase.auth().currentUser;
var uid = user.uid;
const [getVouchers, voucherList, errorMessage] = getVouchersAPI(ID); //List of vouchers to be checked
const [isClaimed] = isClaimedAPI();
return(
<ScrollView>
{voucherList.map((item, index) => {
var voucher = item;
var isVoucherClaimed = isClaimed(voucher.voucherID, uid);
console.log("this is result, ", isVoucherClaimed);
if (
isVoucherClaimed === false
) {
return <Text>{item.name}<Text>
}
})}
</ScrollView>
);
Now nothing happens and I receive the following warning: [Unhandled promise rejection: FirebaseError: Function Query.where() requires a valid third argument, but it was undefined.] but I think this is unrelated to the issue.
Your isClaimed is an async function, meaning that it returns a promise - or a delayed result. If you want to wait for the result when calling isClaimed, you'll need to use await:
await isClaimed(voucher.voucherID, uid);
console.log(result);
This most likely isn't possible in a render method though, which is why (as Asutosh commented) you'll have to store the result in the state, and then use the state in your render method.
So the setup you need is:
Start the loading of all your data in componentDidMount or with useEffect.
When the data is loaded, put it in the state with setState or a state hook.
Use the data in your render method.
For a few examples of this, see:
Firebase switch header option with onAuthStateChanged
React + Firestore : Return a variable from a query
How to render async data in react + firestore?
Just to highlight how you can use isClaimed as hoook and set state calling a async function inside it. Later use the above hook in a react component. Please follow below sanbox.
https://codesandbox.io/s/confident-cray-4g2md?file=/src/App.js

How to use useEffect inside map function?

I have two tables in Firebase: Vouchers & ClaimedVouchers. I am trying to display the vouchers that do not appear in the ClaimedVouchers table. So, I have a query that gets all of the vouchers, then another that checks if they're claimed and if it's claimed or not the function should return either true or false:
This is isClaimedAPI.js
export default () => {
var result;
async function isClaimed(voucher, user) {
var db = Firebase.firestore();
console.log("voucher");
await db
.collection("ClaimedVoucher")
.where("voucherID", "==", voucher)
.where("userID", "==", user)
.get()
.then(function (querySnapshot) {
if (querySnapshot.empty === false) {
result = true;
} else {
result = false;
}
})
.catch(function (error) {
console.log("Error getting documents: ", error);
});
console.log(result, "this is result");
return result;
//Call when component is rendered
useEffect(() => {
isClaimed().then((result) => setResult(result));
}, []);
return [isClaimed];
And then in my main function:
var user = Firebase.auth().currentUser;
var uid = user.uid;
const [getVouchers, voucherList, errorMessage] = getVouchersAPI(ID); //List of vouchers to be checked
const [isClaimed] = isClaimedAPI();
return(
<ScrollView>
{voucherList.map((item, index) => {
var voucher = item;
var isVoucherClaimed = isClaimed(voucher.voucherID, uid);
console.log("this is result, ", isVoucherClaimed);
if (
isVoucherClaimed === false
) {
return <Text>{item.name}<Text>
}
})}
</ScrollView>
);
Now nothing happens and I receive the following warning: [Unhandled promise rejection: FirebaseError: Function Query.where() requires a valid third argument, but it was undefined.] but I think this is unrelated to the issue.
Your isClaimed is an async function, meaning that it returns a promise - or a delayed result. If you want to wait for the result when calling isClaimed, you'll need to use await:
await isClaimed(voucher.voucherID, uid);
console.log(result);
This most likely isn't possible in a render method though, which is why (as Asutosh commented) you'll have to store the result in the state, and then use the state in your render method.
So the setup you need is:
Start the loading of all your data in componentDidMount or with useEffect.
When the data is loaded, put it in the state with setState or a state hook.
Use the data in your render method.
For a few examples of this, see:
Firebase switch header option with onAuthStateChanged
React + Firestore : Return a variable from a query
How to render async data in react + firestore?
Just to highlight how you can use isClaimed as hoook and set state calling a async function inside it. Later use the above hook in a react component. Please follow below sanbox.
https://codesandbox.io/s/confident-cray-4g2md?file=/src/App.js

Setting a useEffect hook's dependency within`useEffect` without triggering useEffect

Edit: It just occurred to me that there's likely no need to reset the variable within the useEffect hook. In fact, stateTheCausesUseEffectToBeInvoked's actual value is likely inconsequential. It is, for all intents and purposes, simply a way of triggering useEffect.
Let's say I have a functional React component whose state I initialize using the useEffect hook. I make a call to a service. I retrieve some data. I commit that data to state. Cool. Now, let's say I, at a later time, interact with the same service, except that this time, rather than simply retrieving a list of results, I CREATE or DELETE a single result item, thus modifying the entire result set. I now wish to retrieve an updated copy of the list of data I retrieved earlier. At this point, I'd like to again trigger the useEffect hook I used to initialize my component's state, because I want to re-render the list, this time accounting for the newly-created result item.
​
const myComponent = () => {
const [items, setItems] = ([])
useEffect(() => {
const getSomeData = async () => {
try {
const response = await callToSomeService()
setItems(response.data)
setStateThatCausesUseEffectToBeInvoked(false)
} catch (error) {
// Handle error
console.log(error)
}
}
}, [stateThatCausesUseEffectToBeInvoked])
const createNewItem = async () => {
try {
const response = await callToSomeService()
setStateThatCausesUseEffectToBeInvoked(true)
} catch (error) {
// Handle error
console.log(error)
}
}
}
​
I hope the above makes sense.
​
The thing is that I want to reset stateThatCausesUseEffectToBeInvoked to false WITHOUT forcing a re-render. (Currently, I end up calling the service twice--once for win stateThatCausesUseEffectToBeInvoked is set to true then again when it is reset to false within the context of the useEffect hook. This variable exists solely for the purpose of triggering useEffect and sparing me the need to elsewhere make the selfsame service request that I make within useEffect.
​
Does anyone know how this might be accomplished?
There are a few things you could do to achieve a behavior similar to what you described:
Change stateThatCausesUseEffectToBeInvoked to a number
If you change stateThatCausesUseEffectToBeInvoked to a number, you don't need to reset it after use and can just keep incrementing it to trigger the effect.
useEffect(() => {
// ...
}, [stateThatCausesUseEffectToBeInvoked]);
setStateThatCausesUseEffectToBeInvoked(n => n+1); // Trigger useEffect
Add a condition to the useEffect
Instead of actually changing any logic outside, you could just adjust your useEffect-body to only run if stateThatCausesUseEffectToBeInvoked is true.
This will still trigger the useEffect but jump right out and not cause any unnecessary requests or rerenders.
useEffect(() => {
if (stateThatCausesUseEffectToBeInvoked === true) {
// ...
}
}, [stateThatCausesUseEffectToBeInvoked]);
Assuming that 1) by const [items, setItems] = ([]) you mean const [items, setItems] = useState([]), and 2) that you simply want to reflect the latest data after a call to the API:
When the state of the component is updated, it re-renders on it's own. No need for stateThatCausesUseEffectToBeInvoked:
const myComponent = () => {
const [ items, setItems ] = useState( [] )
const getSomeData = async () => {
try {
const response = await callToSomeService1()
// When response (data) is received, state is updated (setItems)
// When state is updated, the component re-renders on its own
setItems( response.data )
} catch ( error ) {
console.log( error )
}
}
useEffect( () => {
// Call the GET function once ititially, to populate the state (items)
getSomeData()
// use [] to run this only on component mount (initially)
}, [] )
const createNewItem = async () => {
try {
const response = await callToSomeService2()
// Call the POST function to create the item
// When response is received (e.g. is OK), call the GET function
// to ask for all items again.
getSomeData()
} catch ( error ) {
console.log( error )
}
} }
However, instead of getting all items after every action, you could change your array locally, so if the create (POST) response.data is the newly created item, you can add it to items (create a new array that includes it).

Categories