score:12
if you use a query, you would use local component state to set the query parameter
const [mystate, setstate] = usestate(skiptoken) // initialize with skiptoken to skip at first
const result = usemyquery(mystate)
and in your click handler you then set the state
const changepage = () => {
setstate(5)
}
in your case though, you have a form submit and that sounds you want to use a "mutation", not a query. the point of mutations is that you are not really interested in the result long-term, but rather want to trigger a change on the server by sending data.
const [trigger, result] = usemymutation()
that would be called like
const handlesubmit = () => {
trigger(somevalue)
}
score:6
there is another option to pass boolean as the second argument of the query.
for example:
i use this for login:
const [email, setemail] = usestate<string>('')
const [password, setpassword] = usestate<string>('')
const [logincredentials, setlogincredentials] = usestate<iloginrequest>({ email: '', password: '' })
const { data, error, iserror, issuccess, isloading } = useloginquery(logincredentials, {
skip: logincredentials.email === '' && logincredentials.password === '',
})
note: the skip parameter is false when the component load. when user fills email and password i'm setting the email and password state. and when press the login button i set the logincredentials state and the rtk query is triggered.
Source: stackoverflow.com
Related Query
- Approaches for using RTK-Query hooks inside functions?
- Chain query/mutation calls with RTK Query using React Hooks
- React Hooks must be called in a React function component when using React RTK query createApi
- Wait for state to update when using hooks
- Where to declare auxiliar functions for a React functional component. Inside or outside?
- How to test methods inside functional component using enzyme as instance() returns null for shallow wrapper?
- Using react hooks inside render prop function
- How to dynamically update the value for any input field with one event handler function, using hooks
- "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database
- Trying to flip the position of the OK and Cancel buttons inside an Antd modal using okButtonProps and cancelButtonProps for button position
- Using one webpack project inside another with react hooks causes an error
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- Invalid hook call for using useHistory, useLocation hooks
- React functional component - using inline functions for handlers affects performance?
- Event listener functions changing when using React hooks
- RTK Query get state from another slice using getState()
- Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons
- Can't see state inside method helper function using hooks
- Invalid hook call. Hooks can only be called inside of the body of a function component using react-apollo
- Using React.memo with hooks for controlled inputs
- I got an error for using React.useRef inside a react function component
- React: incorrect examples of calling Hooks inside loops and nested functions
- How to manage async functions using React Hooks API
- Using (Or ||) syntax inside of React useState for assignment
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How to avoid using inline functions in React (ES6) for functions that take arguments
- Helper function using hooks inside a functional component
- How can I dynamically change the baseURL of my RTK Query api only for a specific group of injected endpoints?
- Should I be using functions instead of classes for pages in ReactJS?
- React Class vs Functional Component: When using hooks and functional components one of my functions constantly re-renders
More Query from same tag
- React page refresh value get undefined
- React: TypeError: this.props.courses.map is not a function
- How to update many records in a collection using firebase?
- Bold Text conditionally in JSX
- How can you test functions and variables within your react component's render function?
- Function inside render that's triggering setState
- --fix doesn't fix the errors using eslint
- Template strings ES6
- React's setState(), data mutation for nested structures, why not modify state directly?
- Map in map : TypeError: Cannot read properties of undefined (reading 'map')
- Getting errors in axios post method
- How to sort/hide the sequence of the component according to the hash in react js?
- With mapStateToProps, how to find and set a specific record?
- React-table: State doesn't change as expected, and table doesn't update
- How to load images asynchronously with webpack
- Styled Components Selected Nav Item
- React bootstrap modal not opening when onHide function is enabled
- next.js and webpack resolve.modules
- Trying to learn Reactjs by making a weather app but i'm stuck at "TypeError: Cannot read property 'temp' of undefined"
- How to access promise when using await
- How to grey out a specific option from a select menu upon click?
- React Leaflet how to set min/max Zoom for scrollwheel using state variables?
- Need help on "setState"
- How would i get the selected from my autocomplete box using material ui library in react
- "ERROR db._checkNotDeleted is not a function" when trying to update my database
- Is there a way to check if file is an image or a video when mapping over an array?
- How to use React error boundary with promises
- Where is it better to update the values of the hooks if the value received from the server?
- How to convert Apollo Subscription with Authentication using Apollo Client 2.x from 1.x
- useMemo behaviour across components