I have recently deployed a my-react-app project to github pages with the npm package gh-pages.
I have an RTK Query that doesn't work in the deployed environment but still works in my dev environment. below is the code for the RTK Query and then the code calling the query in the react component.
I was wondering what could be causing the error?
getUni: builder.query({
query: country => ({
url: `http://universities.hipolabs.com/search?country=${country}`,
}),
transformResponse: responseData => {
const resConvert = responseData.slice()
.sort((a, b) => a.name.localeCompare(b.name))
.map(each => {
return { ...each, id: nanoid() }
});
return universityAdapter.setAll(initialState, resConvert)
}
})
})const {
isFetching,
isSuccess,
isUninitialized,
isError
} = useGetUniQuery(countrySearch, {
skip
});
const allUni = useSelector(getAllUniversity);
if (isUninitialized) {
universityData = < h1 > Use the drop down menu to generate all Post Secondary options withen your selection < /h1>
} else if (isError) {
universityData = < h1 > Error fetching.Please refresh page < /h1>
} else if (isSuccess) {
universityData = allUni.filter(uni => uni.name.toLowerCase().startsWith(uniSearch.toLowerCase())).map(uni =>
<div key = {uni.id}
className = {CardStyles.card} >
<h2 className = '' >
{uni.name}
</h2>
<a href = {uni.web_pages[0]} >
{uni.web_pages[0]}
< /a>
</div>
)
}