I have a react component that I'm fetching data with to visualize.
The data fetching is happening constantly, instead of just once as is needed. I was wondering if there is a way to reduce this happening.
The component is like this,
export default function Analytics() {
const {
sentimentData,
expressionsData,
overall,
handleChange,
startDate,
endDate,
sentimentStatistical,
} = useAnalytics();
return (
I'm wondering if I should be using something like componentDidMount() here with componentDidUpdate() ?
UseAnalytics is another component specifically for fetching data, basically just a series of fetches.
There are different buttons to click on the site that can change the data requested, so I do want to be able to change the state of these data objects / request more, i.e., I filter the data based on dates. But confused how to stop it just constantly requesting data.
Thanks in advance,
Update to share the function being called.
export default function useAnalytics() {
let d = new Date();
d.setMonth(d.getMonth() - 1);
const [dateRange, setDateRange] = useState([d.getTime(), Date.now()]);
const [startDate, endDate] = dateRange;
const { data: sentimentData } = useSWR(
`dashboard/sentiment/get-sentiment-timefilter?startTime=${startDate}&endTime=${endDate}`,
fetchSentiment
);
const { data: expressionsData } = useSWR(
`dashboard/expression/get-expression-analytics?startTime=${startDate}&endTime=${endDate}`,
apiRequest
);
return {
sentimentData,
expressionsData,
overall,
handleChange,
setDateRange,
sentimentStatistical,
startDate,
endDate,
};
}
The apirequest is like this,
export async function apiRequest(path, method = "GET", data) {
const accessToken = firebase.auth().currentUser
? await firebase.auth().currentUser.getIdToken()
: undefined;
//this is a workaround due to the backend responses not being built for this util.
if (path == "dashboard/get-settings") {
return fetch(`/api/${path}`, {
method,
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${accessToken}`,
},
body: data ? JSON.stringify(data) : undefined,
})
.then((response) => response.json())
.then((response) => {
if (response.error === "error") {
throw new CustomError(response.code, response.messages);
} else {
return response;
}
});
}
return fetch(`/api/${path}`, {
method,
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${accessToken}`,
},
body: data ? JSON.stringify(data) : undefined,
})
.then((response) => response.json())
.then((response) => {
if (response.status === "error") {
// Automatically signout user if accessToken is no longer valid
if (response.code === "auth/invalid-user-token") {
firebase.auth().signOut();
}
throw new CustomError(response.code, response.message);
} else {
return response.data;
}
});
}
With the answers,
useEffect(()=>{
// this callback function gets called when there is some change in the
// state variable (present in the dependency array)
},[state variable])
This seems about right, I'm wondering how to substantiate the constants outside of useAnalytics?
In the functional component we don't have componentDidMount() or componentDidUpdate () but we have the workaround for the same by using the useEffect react hook.
For implementing the functionality of componentDidMount() we can utilize the following code snippet
useEffect(()=>{
// this is the callback function that needs to be called only once (when the component has mounted)
},[])
And for implementing the functionality of componentDidUpdate() we can utilize the following code snippet
useEffect(()=>{
// this callback function gets called when there is some change in the
// state variable (present in the dependency array)
},[state variable])
First of all, You are using function component, here you cannot use ComponentDidMount() or ComponentDidUpdate() as they only work in class Components. You will have to use useEffect() but you haven't provided any additional code to understand the situation here.
Anyway if you are setting some state on button click when you fetch data and it is occurring again and again it's probably because you haven't used second argument on useEffect() which states that this useEffect() will only run when the second argument changes.
So to answer your question, pass second argument to useEffect() that you are setting when you click a button.
useEffect(() => {
//
}, [state])
As per your code it's functional component and you can't use componentDidMount() and componentDidUpdate() method as this functions are used in class component.
If you want prevent constantly updating component then there are different ways for both class and functional component.
For Class Component: Only executes if old and new data doesn't match. this function does comparison between old and new value.
componentDidUpdate(prevProps, prevState) { if (prevState.data !== this.state.data) { // Now fetch the new data here. } }
For Functional Component: This is only execute when previous state change.
useEffect(() => { // your data }, [stateName])
Related
I'm trying to create a function that is not a component nor hooks that's callable on speficic event. Let's say i have a simple function that post a data using axios and i want to use navigate after the post is successfull. Here's the example
export const authLogin = (email, password) => {
const config = {
withCredentials: true,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': Cookies.get('csrftoken')
}
}
let navigate = useNavigate();
return dispatch => {
console.log('Masuk ke dalam auth file');
dispatch(authStart());
axios.post('/log_in/', {
email: email,
password: password
}, config)
.then(res => {
if (res.data.error) {
alert(res.data.error)
dispatch(authFail(res.data.error))
}
else {
const token = res.data.key;
const expirationDate = new Date(new Date().getTime() + 3600 * 1000);
localStorage.setItem('token', token);
localStorage.setItem('expirationDate', expirationDate);
dispatch(authSuccess(token));
dispatch(checkAuthTimeout(3600));
alert('login berhasil')
navigate("/", { replace: true });
}
})
.catch(err => {
alert(err);
dispatch(authFail(err))
})
}
}
I have an error that says
but when i try to change the function name with an uppercase letter, another problem occured, how do i resolve this problem?
A hook must be attached to a fiber which is directly attached to the React component tree. You CANNOT use hooks outside the component tree because React can't keep track of them (this is why hooks must always be run in the same order, and can't be conditional, because React keeps track of their state internally).
The only time you can use a hook outside of a component, is from another hook.
In short, you must be able to draw a straight line back from the hook call to React rendering the component tree. If you cannot, then it's an invalid hook call.
THE SOLUTION
...in your case - is to simply pass in the navigate function to your action as a parameter:
const MyComponent = () => {
const navigate = useNavigate();
const doSomethingHandler = () => {
dispatch(authLogin(email,password,navigate))
}
}
const authLogin = (email,password,navigate) => {
// ...do your action and call the `navigate` parameter
// when you need to
}
I am developing a reactjs app. I am trying to list users from the data of an ajax response. Below is the code.
const [ users, setUsers ] = useState([]);
useEffect(() => {
const config = {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
}
axios.get('users', config).then((res) => {
if (res.status == 200 && res.data.msg == "success") {
setUsers(res.data.users)
}
else {
history.push("/");
}
feather.replace()
});
});
And I am using the code below to list the users in a table.
function getRows(users) {
return users.map(user => {
const { u_id, username } = user;
return (
<tr key={u_id} id={u_id}>
<td>{u_id}</td>
<td>{username}</td>
<td class="delete">
<span data-feather="edit"></span></span>
</td>
</tr>
)
});
}
Now the problem is that it is generating an endless loop of requests to fetch the users. I think it is because each time the state changes react is calling the useEffect hook. How to fix this.
useEffect(() => {
const config = {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
}
axios.get('users', config).then((res) => {
if (res.status == 200 && res.data.msg == "success") {
setUsers(res.data.users)
}
else {
history.push("/");
}
feather.replace()
});
}, []);
note here I passed the empty array[] as the second argument for useEffect,
Reason of empty array at useEffect
If you want to run an effect and clean it up only once (on the mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to be re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.
read more about useEffect
You would want to add an empty array as useEffect dependency, so it only run once:
useEffect(() => {
const config = {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
};
axios.get("users", config).then((res) => {
if (res.status == 200 && res.data.msg == "success") {
setUsers(res.data.users);
} else {
history.push("/");
}
feather.replace();
});
}, []); //<-- Add empty dependency here
The useEffect hook basically accepts two arguments, the first one being the callback, and the second one is an array of dependencies (optional). The purpose of the second argument (array of dependencies) is to trigger the callback function, whenever any value in the dependencies array change. So, if you don't use the dependencies array in your useEffect hook, the callback function is executed every time the component is rendered, i.e, whenever the state variables are mutated.
So what's causing the loop?
const [ users, setUsers ] = useState([]);
useEffect(() => {
const config = {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
}
axios.get('users', config).then((res) => {
if (res.status == 200 && res.data.msg == "success") {
setUsers(res.data.users) //Updating state causes the component to re-render
}
else {
history.push("/");
}
feather.replace()
});
});
Looking at your code, we can observe that you are using two hooks ( useState and useEffect) , so when the promise is resolved, you are updating your users state with the latest fetched information. So far, so good. When a state is updated, we know that the component is re-rendered (that's the basic principle on how React works). So updating the users state causes the component function to re-render, which would again invoke useEffect which would again update users state, and so forth.
Workaround
To avoid this loop, we'd want to execute useEffect only once, and not every time the component is rendered. This could be accomplished by passing an empty array as the second argument (Which basically tells React to run `useEffect` only when the component is rendered for the first time).
const [ users, setUsers ] = useState([]);
useEffect(() => {
const config = {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
}
}
axios.get('users', config).then((res) => {
if (res.status == 200 && res.data.msg == "success") {
setUsers(res.data.users) //Updating state causes the component to re-render
}
else {
history.push("/");
}
feather.replace()
});
},[]); //Empty array as the second argument
This is similar to componentDidMount when working with class-based components.
Further, you could also add variables to the array that would cause the useEffect to be invoked only when the variables in the array are mutated.
Add dependency array to you're useEffect hook , this will solve you're problem
this will act like component did mount
useEffect(()=> {
/// you're code
} , [])
but the one that you used acts like component did update and causes problem because you need to execute the code only when component mounted
I have created a custom hook that makes an HTTP request. But the problem is that it makes requests in an infinite loop. I cannot understand the reason for this. I want the request to fire, if there is either a change in fetchConfig or action
export default function useBrokerFetch<T>(fetchConfig: { [key: string]: any }, action: BrokerActions): [T, boolean] {
const [data, setData] = useState(null as T);
const [loading, setLoading] = useState(true);
const brokerEndPoint = process.env.REACT_APP_APIBROKER_ENDPOINT;
async function fetchUrl() {
try {
const {data} = await BrokerHttpRequest(new Request(brokerEndPoint, {
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
method: "POST",
body: JSON.stringify({
"data": fetchConfig,
"signature": BrokerServiceProviders.WMS,
"action": action
})
}));
if (data) {
setData(data);
setLoading(false);
} else {
/**
* The request with the broker failed or the broker
* did not return any data. In either case, set the
* broker data to undefined and update the loading
* state to "not-loading"
*/
setData(undefined as T);
setLoading(false);
}
} catch (err) {
setData(undefined as T);
setLoading(false);
}
}
useEffect(() => {
fetchUrl();
}, [fetchConfig, action]);
return [data, loading];
}
What is it that I am doing wrong?
So I am not an expert on react but here are my 2 cents. I think every time you update "data" in your http-request your parent component depends on it an re-renders. When the parent re-renders their objects/child components are initialized again and useBrokerFetch is called again.
In this case "data" or "actions" might still be of the same value but for useEffect it matters if the "are equal" to the props provided. Since the parent re-rendered they are not the same. Please keep in mind, that also functions are up to change in JS.
I recommend the useCallback-Hook to you. With useCallback() you can basically cache a value you then provide as props to useBrokerFetch(). When your parent re-renders the props action and data stay equal and useEffect should not be called again. You use useCallback similar to useEffect, check out the docs.
I'm new to react and tying in the back end but after I make the fetch requests, I have to reload the page to see any changes. The database is updated as soon as the functions are called but the component doesn't re-render. I know setState works asynchronously, so I tried calling my functions in the callback of setState but that did not work.
This happens on both my handleSubmit and handleDelete functions. My initial get request is in my componentDidMount so I'm including that in case it helps.
I couldn't find the answer that I needed on the site, maybe the recommendations were just off but here I am, lol. Thanks in advance.
componentDidMount() {
// todos is the data we get back
// setting the state to newly aquired data
fetch("/api/todos")`enter code here`
.then(res => res.json())
.then(todos => this.setState({ todos }, () =>
console.log("Todos fetched...", todos)))
.catch(err => console.log(err))
}
// onClick for submit button
handleSubmit = (e) => {
e.preventDefault();
const data = this.state;
fetch("/api/todos", {
method: "post",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
};
// onClick for delete button
handleDelete = (e) => {
e.preventDefault();
let uniqueId = e.target.getAttribute("id")
fetch(`/api/todos/${uniqueId}`, {
method: "delete",
headers: { 'Content-Type': 'application/json' }
})
};
// Some of the JSX if needed
<DeleteBtn
id={todo._id}
onClick={this.handleDelete}
>X</DeleteBtn>
<Form onSubmit={this.handleSubmit} id="myForm"></Form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
The result I'm looking for is once I add a todo, for it to render on my list immediately, rather than only upon page reload.
Return the details from the back-end in the requests, use that values to update the state,
Currently you just perform the operation on the back-end and front-end doesn't know that it happened in the back-end.
The Best way is to either pass the full data(list or object) back to front-end after operation performed on the DB and link the values to a state,
if the data is bulk then send a success message(200 is enough) back from back-end to front-end and if success change the value(list) in front-end,
Link the value(list) to a state in front-end to have a re rendering of the component.
you've to update your state, and once you'll update the state your component will re-render and it'll shows the latest changes.
Here i am assuming "todos" you've set in your state is an array, then just update it on deleting and adding.
i.e:
// onClick for submit button
handleSubmit = (e) => {
e.preventDefault();
const data = this.state;
const currentTodos = [...this.state.todos]
fetch("/api/todos", {
method: "post",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
}).then(()=>{
currentTodos.push(data);
this.setState({todos:currentTodos})
})
};
// similarly for delete you can do
// onClick for delete button
handleDelete = (e) => {
e.preventDefault();
let uniqueId = e.target.getAttribute("id")
let currentTodos = [...this.state.todos];
fetch(`/api/todos/${uniqueId}`, {
method: "delete",
headers: { 'Content-Type': 'application/json' }
}).then(()=>{
let updatedTodos = currentTodos.filter(todo=>todo._id !==uniqueId);
this.setState({todos:updatedTodos})
})
};
You are probably not changing your state "todos" that is why it doesn't render. You could fetch todos after every change (after remove, update, add...) or change the state yourself.
Methode 1:
componentDidMount() {
this.getTodos();
}
getTodos = () => {
//fetch todos, setState
}
handleSubmit = () => {
fetch(...).then(this.getTodos);
}
handleDelete = () => {
fetch(...).then(this.getTodos);
}
Methode 2:
componentDidMount() {
this.getTodos();
}
getTodos = () => {
//fetch todos, setState
}
handleSubmit = () => {
fetch(...);
let todos = this.state.todos;
todos.push(newTodo);
this.setState({todos});
}
handleDelete = () => {
fetch(...);
let todos = this.state.todos;
//remove todo from todos
this.setState({todos});
}
I want to call useQuery whenever I need it,
but useQuery can not inside the function.
My trying code is:
export const TestComponent = () => {
...
const { data, loading, error } = useQuery(gql(GET_USER_LIST), {
variables: {
data: {
page: changePage,
pageSize: 10,
},
},
})
...
...
const onSaveInformation = async () => {
try {
await updateInformation({...})
// I want to call useQuery once again.
} catch (e) {
return e
}
}
...
How do I call useQuery multiple times?
Can I call it whenever I want?
I have looked for several sites, but I could not find a solutions.
From apollo docs
When React mounts and renders a component that calls the useQuery hook, Apollo Client automatically executes the specified query. But what if you want to execute a query in response to a different event, such as a user clicking a button?
The useLazyQuery hook is perfect for executing queries in response to
events other than component rendering
I suggest useLazyQuery. In simple terms, useQuery will run when your component get's rendered, you can use skip option to skip the initial run. And there are some ways to refetch/fetch more data whenever you want. Or you can stick with useLazyQuery
E.g If you want to fetch data when only user clicks on a button or scrolls to the bottom, then you can use useLazyQuery hook.
useQuery is a declarative React Hook. It is not meant to be called in the sense of a classic function to receive data. First, make sure to understand React Hooks or simply not use them for now (90% of questions on Stackoverflow happen because people try to learn too many things at once). The Apollo documentation is very good for the official react-apollo package, which uses render props. This works just as well and once you have understood Apollo Client and Hooks you can go for a little refactor. So the answers to your questions:
How do I call useQuery multiple times?
You don't call it multiple times. The component will automatically rerender when the query result is available or gets updated.
Can I call it whenever I want?
No, hooks can only be called on the top level. Instead, the data is available in your function from the upper scope (closure).
Your updateInformation should probably be a mutation that updates the application's cache, which again triggers a rerender of the React component because it is "subscribed" to the query. In most cases, the update happens fully automatically because Apollo will identify entities by a combination of __typename and id. Here's some pseudocode that illustrates how mutations work together with mutations:
const GET_USER_LIST = gql`
query GetUserList {
users {
id
name
}
}
`;
const UPDATE_USER = gql`
mutation UpdateUser($id: ID!, $name: String!) {
updateUser(id: $id, update: { name: $name }) {
success
user {
id
name
}
}
}
`;
const UserListComponen = (props) => {
const { data, loading, error } = useQuery(GET_USER_LIST);
const [updateUser] = useMutation(UPDATE_USER);
const onSaveInformation = (id, name) => updateUser({ variables: { id, name });
return (
// ... use data.users and onSaveInformation in your JSX
);
}
Now if the name of a user changes via the mutation Apollo will automatically update the cache und trigger a rerender of the component. Then the component will automatically display the new data. Welcome to the power of GraphQL!
There's answering mentioning how useQuery should be used, and also suggestions to use useLazyQuery. I think the key takeaway is understanding the use cases for useQuery vs useLazyQuery, which you can read in the documentation. I'll try to explain it below from my perspective.
useQuery is "declarative" much like the rest of React, especially component rendering. This means you should expect useQuery to be called every render when state or props change. So in English, it's like, "Hey React, when things change, this is what I want you to query".
for useLazyQuery, this line in the documentation is key: "The useLazyQuery hook is perfect for executing queries in response to events other than component rendering". In more general programming speak, it's "imperative". This gives you the power to call the query however you want, whether it's in response to state/prop changes (i.e. with useEffect) or event handlers like button clicks. In English, it's like, "Hey React, this is how I want to query for the data".
You can use fetchMore() returned from useQuery, which is primarily meant for pagination.
const { loading, client, fetchMore } = useQuery(GET_USER_LIST);
const submit = async () => {
// Perform save operation
const userResp = await fetchMore({
variables: {
// Pass any args here
},
updateQuery(){
}
});
console.log(userResp.data)
};
Read more here: fetchMore
You could also use useLazyQuery, however it'll give you a function that returns void and the data is returned outside your function.
const [getUser, { loading, client, data }] = useLazyQuery(GET_USER_LIST);
const submit = async () => {
const userResp = await getUser({
variables: {
// Pass your args here
},
updateQuery() {},
});
console.log({ userResp }); // undefined
};
Read more here: useLazyQuery
You can create a reusable fetch function as shown below:
// Create query
const query = `
query GetUserList ($data: UserDataType){
getUserList(data: $data){
uid,
first_name
}
}
`;
// Component
export const TestComponent (props) {
const onSaveInformation = async () => {
// I want to call useQuery once again.
const getUsers = await fetchUserList();
}
// This is the reusable fetch function.
const fetchUserList = async () => {
// Update the URL to your Graphql Endpoint.
return await fetch('http://localhost:8080/api/graphql?', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({
query,
variables: {
data: {
page: changePage,
pageSize: 10,
},
},
})
}).then(
response => { return response.json(); }
).catch(
error => console.log(error) // Handle the error response object
);
}
return (
<h1>Test Component</h1>
);
}
Here's an alternative that worked for me:
const { refetch } = useQuery(GET_USER_LIST, {
variables: {
data: {
page: changePage,
pageSize: 10,
},
},
}
);
const onSaveInformation = async () => {
try {
await updateInformation({...});
const res = await refetch({ variables: { ... }});
console.log(res);
} catch (e) {
return e;
}
}
And here's a similar answer for a similar question.
Please use
const { loading, data, refetch } = useQuery(Query_Data)
and call it when you need it i.e
refetch()