enter image description here
When I click on the dropdown button, it'll trigger API calls and it works fine. However, if I click the dropdown button again (without refreshing the page), API calls(not the whole fetchData function but only the await cityAPIS calls ) will call twice(ideally it should only be called once.)
Does anyone know why is this happening?
PS. I didn't use React.strictMode.
import CityApi from '#Api/CityApi';
export default function useFetchCityApi(
initState,
loadState,
imgDispatch,
selectCountry
) {
useEffect(() => {
if (initState) {
return;
}
async function fetchData() {
imgDispatch({ type: 'FETCH_DATA', fetching: true });
let data = await CityApi(
loadState.load === 0 ? 0 : loadState.load - 30,
selectCountry
);
if (data === 'error') {
imgDispatch({ type: 'FETCH_DATA', fetching: true });
return;
}
imgDispatch({ type: 'STACK_IMAGE', data });
}
fetchData();
}, [loadState.load]);
}
whole codebase:
github codebase
Related
Its a action-function that works with redax (it works perfectly because I used it)
export const fetchCategory = () => {
return async (dispatch) => {
try {
dispatch(settingsSlice.actions.settingsFetching());
const response = await request("/category/getAll", "POST", {});
dispatch(settingsSlice.actions.settingsFetchingSuccess(response));
} catch (e) {
dispatch(settingsSlice.actions.settingsFetchingError(e));
}
};
};
I need that when the button is pressed, a request is made to the server and the state is updated
Here is the function that is executed when you click on the button :
const buttonHandler = async () => {
await request("/category/create", "POST", {
newCategory: {
label: form.categoryLabel,
limit: form.categoryLimit,
},
});
setForm(initialState);
fetchCategory();
};
I checked, the form is sent to the backend and everything works fine except for this "fetchCategory"
I already tried to do this using useEffect
useEffect(() => {
fetchCategory();
}, [Button , buttonHandler]);
i tried to install different dependencies but no result. How can this problem be fixed?
You need to dispatch the action!
Your fetchCategory function is a "thunk action creator". Calling fetchCategory() creates the thunk action, but doesn't do anything with it. You need to call dispatch(fetchCategory()) to execute the action.
const buttonHandler = async () => {
await request("/category/create", "POST", {
newCategory: {
label: form.categoryLabel,
limit: form.categoryLimit,
},
});
setForm(initialState);
--> dispatch(fetchCategory()); <--
};
I have a spinner but it works while the page is rendering and I also need it to work when I click the LoadMore button, I don't understand how
Here is the link Spinner
You can call this.setState with setting status to pending in first lines of loadMore method, or better call it in fetchImageApi, just like this:
fetchImageApi = () => {
const { searchbar, page } = this.state;
this.setState({status: 'pending'}, () => {
imageApi(searchbar, page)
.then((images) => {
if (images.total === 0) {
this.setState({ error: "No any picture", status: "rejected" });
} else {
this.setState((prevState) => ({
result: [...prevState.result, ...images.hits],
status: "resolved",
page: prevState.page + 1,
searchbar: searchbar,
}));
}
})
.catch((error) => this.setState({ error, status: "rejected" }));
}
};
There is callback as a second argument of setState method, which means that your callback code will be executed right after react updates its state, so you don't have to write await logic for your code.
I just found a finite state module called Robot. it's very lightweight and simple. I got one case I couldn't solve, which is to create a dynamic request for API inside Robot. I tried this
robot.js
const context = () => ({
data: [],
});
export const authRobot = (request) =>
createMachine(
{
ready: state(transition(CLICK, 'loading')),
loading: invoke(
request,
transition(
'done',
'success',
reduce((ctx, evt) => ({ ...ctx, data: evt }))
),
transition(
'error',
'error',
reduce((ctx, ev) => ({ ...ctx, error: ev }))
)
),
success: state(immediate('ready')),
error: state(immediate('ready')),
},
context
);
and I use it in my react component like this
// ...
export default function Login() {
const [current, send] = useMachine(authRobot(UserAPI.getData));
const { data } = current.context;
function handleSubmit(e) {
e.preventDefault();
send(CLICK);
}
useEffect(() => {
console.log(data);
console.log(current);
console.log(current.name);
}, [data]);
// ...
the problem happened when I click the button, my web console logs many data. it seems the event called multiple times. what can I do here?
I think the problem here is that useMachine() will trigger a rerender when passed a different machine. Since you are creating a new machine inside your render function useMachine sees this as a different machine every time.
I'd create your machine outside of this closure.
Here's the useFetch code I've constructed, which is very much based upon several well known articles on the subject:
const dataFetchReducer = (state: any, action: any) => {
let data, status, url;
if (action.payload && action.payload.config) {
({ data, status } = action.payload);
({ url } = action.payload.config);
}
switch (action.type) {
case 'FETCH_INIT':
return {
...state,
isLoading: true,
isError: false
};
case 'FETCH_SUCCESS':
return {
...state,
isLoading: false,
isError: false,
data: data,
status: status,
url: url
};
case 'FETCH_FAILURE':
return {
...state,
isLoading: false,
isError: true,
data: null,
status: status,
url: url
};
default:
throw new Error();
}
}
/**
* GET data from endpoints using AWS Access Token
* #param {string} initialUrl The full path of the endpoint to query
* #param {JSON} initialData Used to initially populate 'data'
*/
export const useFetch = (initialUrl: ?string, initialData: any) => {
const [url, setUrl] = useState<?string>(initialUrl);
const { appStore } = useContext(AppContext);
console.log('useFetch: url = ', url);
const [state, dispatch] = useReducer(dataFetchReducer, {
isLoading: false,
isError: false,
data: initialData,
status: null,
url: url
});
useEffect(() => {
console.log('Starting useEffect in requests.useFetch', Date.now());
let didCancel = false;
const options = appStore.awsConfig;
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
let response = {};
if (url && options) {
response = await axios.get(url, options);
}
if (!didCancel) {
dispatch({ type: 'FETCH_SUCCESS', payload: response });
}
} catch (error) {
// We won't force an error if there's no URL
if (!didCancel && url !== null) {
dispatch({ type: 'FETCH_FAILURE', payload: error.response });
}
}
};
fetchData();
return () => {
didCancel = true;
};
}, [url, appStore.awsConfig]);
return [state, setUrl];
}
This seems to work fine except for one use case:
Imagine a new Customer Name or UserName or Email Address is typed in - some piece of data that has to be checked to see if it already exists to ensure such things remain unique.
So, as an example, let's say the user enters "My Existing Company" as the Company Name and this company already exists. They enter the data and press Submit. The Click event of this button will be wired up such that an async request to an API Endpoint will be called - something like this: companyFetch('acct_mgmt/companies/name/My%20Existing%20Company')
There'll then be a useEffect construct in the component that will wait for the response to come back from the Endpoint. Such code might look like this:
useEffect(() => {
if (!companyName.isLoading && acctMgmtContext.companyName.length > 0) {
if (fleetName.status === 200) {
const errorMessage = 'This company name already exists in the system.';
updateValidationErrors(name, {type: 'fetch', message: errorMessage});
} else {
clearValidationError(name);
changeWizardIndex('+1');
}
}
}, [companyName.isLoading, companyName.isError, companyName.data]);
In this code just above, an error is shown if the Company Name exists. If it doesn't yet exist then the wizard this component resides in will advance forward. The key takeaway here is that all of the logic to handle the response is contained in the useEffect.
This all works fine unless the user enters the same Company Name twice in a row. In this particular case, the url dependency in the companyFetch instance of useFetch does not change and thus there is no new request sent to the API Endpoint.
I can think of several ways to try to solve this but they all seem like hacks. I'm thinking that others must have encountered this problem before and am curious how they solved it.
Not a specific answer to your question, more of another approach: You could always provide a function to trigger a refetch by the custom hook instead of relying of the useEffect to catch all different cases.
If you want to do that, use useCallback in your useFetch so you don't create an endless loop:
const triggerFetch = useCallback(async () => {
console.log('Starting useCallback in requests.useFetch', Date.now());
const options = appStore.awsConfig;
const fetchData = async () => {
dispatch({ type: 'FETCH_INIT' });
try {
let response = {};
if (url && options) {
response = await axios.get(url, options);
}
dispatch({ type: 'FETCH_SUCCESS', payload: response });
} catch (error) {
// We won't force an error if there's no URL
if (url !== null) {
dispatch({ type: 'FETCH_FAILURE', payload: error.response });
}
}
};
fetchData();
}, [url, appStore.awsConfig]);
..and at the end of the hook:
return [state, setUrl, triggerFetch];
You can now use triggerRefetch() anywhere in your consuming component to programmatically refetch data instead of checking every case in the useEffect.
Here is a complete example:
CodeSandbox: useFetch with trigger
To me this slightly related to thing "how to force my browser to skip cache for particular resource" - I know, XHR is not cached, just similar case. There we may avoid cache by providing some random meaningless parameter in URL. So you can do the same.
const [requestIndex, incRequest] = useState(0);
...
const [data, updateURl] = useFetch(`${url}&random=${requestIndex}`);
const onSearchClick = useCallback(() => {
incRequest();
}, []);
I'm building a discord/slack clone. I have Channels, Messages and users.
As soon as my Chat component loads, channels get fetched with useQuery hook from Apollo.
By default when a users comes at the Chat component, he needs to click on a specific channels to see the info about the channel and also the messages.
In the smaller Channel.js component I write the channelid of the clicked Channel to the apollo-cache. This works perfect, I use the useQuery hooks #client in the Messages.js component to fetch the channelid from the cache and it's working perfect.
The problem shows up when I use the useLazyQuery hook for fetching the messages for a specific channel (the channel the user clicks on).
It causes a infinite re-render loop in React causing the app to crash.
I've tried working with the normal useQuery hook with the skip option. I then call the refetch() function when I need it. This 'works' in the sense of it not giving me infinite loop.
But then the console.log() give me this error: [GraphQL error]: Message: Variable "$channelid" of required type "String!" was not provided. Path: undefined. This is very weird because my schema and variables are correct ??
The useLazyQuery does give me infinite loop as said before.
I'm really struggling with the conditionality of apollo/react hooks...
/// Channel.js component ///
const Channel = ({ id, channelName, channelDescription, authorName }) => {
const chatContext = useContext(ChatContext);
const client = useApolloClient();
const { fetchChannelInfo, setCurrentChannel } = chatContext;
const selectChannel = (e, id) => {
fetchChannelInfo(true);
const currentChannel = {
channelid: id,
channelName,
channelDescription,
authorName
};
setCurrentChannel(currentChannel);
client.writeData({
data: {
channelid: id
}
});
// console.log(currentChannel);
};
return (
<ChannelNameAndLogo onClick={e => selectChannel(e, id)}>
<ChannelLogo className='fab fa-slack-hash' />
<ChannelName>{channelName}</ChannelName>
</ChannelNameAndLogo>
);
};
export default Channel;
/// Messages.js component ///
const FETCH_CHANNELID = gql`
{
channelid #client
}
`;
const Messages = () => {
const [messageContent, setMessageContent] = useState('');
const chatContext = useContext(ChatContext);
const { currentChannel } = chatContext;
// const { data, loading, refetch } = useQuery(FETCH_MESSAGES, {
// skip: true
// });
const { data: channelidData, loading: channelidLoading } = useQuery(
FETCH_CHANNELID
);
const [fetchMessages, { data, called, loading, error }] = useLazyQuery(
FETCH_MESSAGES
);
//// useMutation is working
const [
createMessage,
{ data: MessageData, loading: MessageLoading }
] = useMutation(CREATE_MESSAGE);
if (channelidLoading && !channelidData) {
console.log('loading');
setInterval(() => {
console.log('loading ...');
}, 1000);
} else if (!channelidLoading && channelidData) {
console.log('not loading anymore...');
console.log(channelidData.channelid);
fetchMessages({ variables: { channelid: channelidData.channelid } });
console.log(data);
}
I expect to have messages in data from the useLazyQuery ...But instead get this in the console.log():
react-dom.development.js:16408 Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop.
You could use the called variable return by useLazyQuery.
!called && fetchMessages({ variables: { channelid: channelidData.channelid } });
You call fetchMessages on every render.
Try to put fetchMessages in a useEffect :
useEffect(() => {
if (!channelidLoading && channelidData) {
fetchMessages();
}
}, [channelidLoading, channelidData]);
Like that the fetchMessages function only calls when
channelidLoading or channelidData is changing.
You could also look at doing the following:
import debounce from 'lodash.debounce';
...
const [fetchMessages, { data, called, loading, error }] = useLazyQuery(
FETCH_MESSAGES
);
const findMessageButChill = debounce(fetchMessages, 350);
...
} else if (!channelidLoading && channelidData) {
findMessageButChill({
variables: { channelid: channelidData.channelid },
});
}