title: What is the correct way to pass parameters to a React-query useQuery method that uses Axios
body: <p>I am currently building a Ruby on Rails Webpacker application with a React front end. I am at the point where I would like to create all the quires I need to make calls to my Rails API. I was loosely following this tutorial <a href="https://www.youtube.com/watch?v=0bKc_ch6MZY" rel="noreferrer">https://www.youtube.com/watch?v=0bKc_ch6MZY</a> (<a href="https://github.com/daryanka/react-query-tutorial/blob/master/src/containers/Post.js" rel="noreferrer">https://github.com/daryanka/react-query-tutorial/blob/master/src/containers/Post.js</a>, <a href="https://github.com/daryanka/react-query-tutorial/blob/master/src/Queries.js" rel="noreferrer">https://github.com/daryanka/react-query-tutorial/blob/master/src/Queries.js</a>), in order to write some axios based query functions that I could use with react-query. I had no problem with getting the queries to behave as expected when the url for the endpoint was a hard coded string. When I attempted to pass in a parameter to make dynamic urls I ran into the issue of not having access to said parameter; specifically the &quot;prodId&quot; parameter. I did however notice that the &quot;prodId&quot; was inside the &quot;key&quot; parameter array like so:</p>
  <pre><code>queryKey: Array(2)
  0: &quot;product&quot;
  1: &quot;1&quot;
  length: 2
  enter code here
  </code></pre>
  <p>I could just access it from there but that approach does seem a little off, I also did not find any examples or documentation that attempted to access a parameter from the query key array. I would like to know what it is I am doing incorrectly with regards to passing in parameters? Were there some syntax changes in react-query that I am not taking into account?</p>
  <p>react-query@^3.17.2</p>
  <p>webpacker (5.2.1)</p>
  <p>axios@^0.21.1</p>
  <pre><code>//Product.js
  
  import axios from &quot;axios&quot;
  import { getProduct } from &quot;../../queries/products&quot;
  import { useQuery } from &quot;react-query&quot;
  
  const prodId= '1'
  const { data } = useQuery(['product', prodId], getProduct)
  
  //queries/products.js
  import axios from 'axios'
  
  export const getProduct = async (key, { prodId }) =&gt; {
      console.log(opid)
      const { data } = await axios.get(`/api/v1/products/${prodId}`)
      return data
  }
  </code></pre>