<span class="punctuation">)</span><span class="operator">:</span> <span class="type"><a href="#/api/common/type-aliases/callback/parameterizedcallback/">ParameterizedCallback</a></span><span class="operator"><</span>Parameter<span class="operator">></span></code></pre><div class="table"><table><tr><th></th><th>Type</th><th>Description</th></tr><tr><th><code>queryId</code></th><td><code><span class="builtin">string</span> <span class="operator">|</span> <span class="type"><a href="#/api/ui-react/type-aliases/identity/getid/">GetId</a></span><span class="operator"><</span>Parameter<span class="operator">></span></code></td><td><p>The <a href="#/api/common/type-aliases/identity/id/"><code>Id</code></a> of the query to update, or a <a href="#/api/ui-react/type-aliases/identity/getid/"><code>GetId</code></a> function that will return it.</p></td></tr><tr><th><code>paramId</code></th><td><code><span class="builtin">string</span> <span class="operator">|</span> <span class="type"><a href="#/api/ui-react/type-aliases/identity/getid/">GetId</a></span><span class="operator"><</span>Parameter<span class="operator">></span></code></td><td><p>The <a href="#/api/common/type-aliases/identity/id/"><code>Id</code></a> of the parameter to update, or a <a href="#/api/ui-react/type-aliases/identity/getid/"><code>GetId</code></a> function that will return it.</p></td></tr><tr><th><code>getParamValue</code></th><td><code><span class="punctuation">(</span>parameter<span class="operator">:</span> Parameter<span class="punctuation">,</span> queries<span class="operator">:</span> <span class="type"><a href="#/api/queries/interfaces/queries/queries/">Queries</a></span><span class="punctuation">)</span> <span class="operator">=></span> <span class="type"><a href="#/api/queries/type-aliases/params/paramvalue/">ParamValue</a></span></code></td><td><p>A function which returns the parameter value that will be used to update the query, based on the parameter the callback will receive (and which is most likely a DOM event).</p></td></tr><tr><th><code>getParamValueDeps<span class="operator">?</span></code></th><td><code>DependencyList</code></td><td><p>An optional array of dependencies for the <code>getParamValue</code> function, which, if any change, result in the regeneration of the callback. This parameter defaults to an empty array. Also use this to indicate the dependencies of any <a href="#/api/ui-react/type-aliases/identity/getid/"><code>GetId</code></a> functions if used as the queryId or paramId arguments.</p></td></tr><tr><th><code>queriesOrQueriesId<span class="operator">?</span></code></th><td><code><span class="type"><a href="#/api/ui-react/type-aliases/identity/queriesorqueriesid/">QueriesOrQueriesId</a></span></code></td><td><p>The <a href="#/api/queries/interfaces/queries/queries/"><code>Queries</code></a> object to be updated: omit for the default context <a href="#/api/queries/interfaces/queries/queries/"><code>Queries</code></a> object, provide an <a href="#/api/common/type-aliases/identity/id/"><code>Id</code></a> for a named context <a href="#/api/queries/interfaces/queries/queries/"><code>Queries</code></a> object, or provide an explicit reference.</p></td></tr><tr><th><code>then<span class="operator">?</span></code></th><td><code><span class="punctuation">(</span>queries<span class="operator">:</span> <span class="type"><a href="#/api/queries/interfaces/queries/queries/">Queries</a></span><span class="punctuation">,</span> paramValue<span class="operator">:</span> <span class="type"><a href="#/api/queries/type-aliases/params/paramvalue/">ParamValue</a></span><span class="punctuation">)</span> <span class="operator">=></span> <span class="keyword">void</span></code></td><td><p>A function which is called after the mutation, with a reference to the <a href="#/api/queries/interfaces/queries/queries/"><code>Queries</code></a> object and the parameter value used in the update.</p></td></tr><tr><th><code>thenDeps<span class="operator">?</span></code></th><td><code>DependencyList</code></td><td><p>An optional array of dependencies for the <code>then</code> function, which, if any change, result in the regeneration of the callback. This parameter defaults to an empty array.</p></td></tr><tr><th class="right">returns</th><td><code><span class="type"><a href="#/api/common/type-aliases/callback/parameterizedcallback/">ParameterizedCallback</a></span><span class="operator"><</span>Parameter<span class="operator">></span></code></td><td><p></p><p>A parameterized callback for subsequent use.</p><p></p></td></tr></table></div><p>This hook is useful, for example, when creating an event handler that will update query parameters based on user interaction. In this case, the parameter will likely be the event, so that you can use data from it to update the query parameter.</p><p>The third parameter is a function which will produce the parameter value that will then be used to update the query in the callback.</p><p>If that function has any other dependencies, the changing of which should also cause the callback to be recreated, you can provide them in an array in the optional fourth parameter, just as you would for any React hook with dependencies.</p><p>For convenience, you can optionally provide a <code>then</code> function (with its own set of dependencies) which will be called just after the query parameter has been updated.</p><p>The <a href="#/api/queries/interfaces/queries/queries/"><code>Queries</code></a> object to which the callback will make the mutation (indicated by the hook's <code>queriesOrQueriesId</code> parameter) is always automatically used as a hook dependency for the callback.</p><section class="s6"><h6>Example</h6><p>This example uses the <code>useSetParamValueCallback</code> hook to create an event handler which updates a query parameter when an input element changes.</p><pre><code><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span><span class="punctuation">;</span>
0 commit comments