I have a redux setup that looks like this:
const INITIAL_STATE = { endPoint: { street: '', coordinates: [] }, //[13.3969, 52.5182] startingPoint: { street: '', coordinates: [] }, //[13.413215, 52.521918] favouritePoint: { street: '', coordinates: [] }, //favouriteLocations: getFavouritePlaces(), favouriteLocations: [ { name: 'House', street: 'Nowhere', coordinates: [8, 53], }, ], addressesFoundList: [],};export default ( state: LocationsType = INITIAL_STATE, //state: any = INITIAL_STATE, action: any,) => { switch (action.type) { case LOCATIONS.SET_END_POINT: return { ...state, endPoint: action.payload }; case LOCATIONS.SET_FAVOURITE_POINT: return { ...state, favouritePoint: action.payload }; default: return state; }};
Later on, I use its values like this:
const myFavouriteDestinations = useTypedSelector( (state) => state.locations.favouriteLocations, );
Now, instead of hardcoding values, I want to set favoriteLocations after obtaining data from graphql. For that, I wrote this function and called it like this favouriteLocations: getFavouritePlaces(),
const getFavouritePlaces = () => { const { data, error, refetch } = useGetPersonalFavouritePlacesQuery(); if (data) { console.log('from reduxxx', data.personalFavouritePlaces.nodes); const favoriteLocations = data.personalFavouritePlaces.nodes.map((node: FavouritePlace) => { return { name: node.customisedName, street: node.placeName, coordinates: node.center.coordinates } }) console.log('from reduxxx', favoriteLocations); return favoriteLocations; } else { const favouriteLocations = [ { name: 'House', street: 'Nowhere', coordinates: [8, 5], }, ] return favouriteLocations; }}
However, this doesn't work and I end up with an invalid hook call error. Which doesn't make sense to me since I am using the graphql hook inside a function already. What else can I do to set the favoriteLocations data?