T
TanStack•3y ago
equal-aqua

How to handle param build by two or more hooks?

Right now I have an a opportunity to rebuild one of my company applications and i want to use react-query instead of useeffect's, but I have one problem with that. Main useEffect that fetch records data have many query paramas like &ordering=${sortNameColumnAsc} and that's something I can handle, but I don't really have anything in mind, how to handle something like that &number_calls=${conPerLeadStart},${conPerLeadEnd}. And in that app we have many of params that're build on two hooks. How can I handle that using react-query?
No description
No description
5 Replies
optimistic-gold
optimistic-gold•3y ago
all params go to the query key.
equal-aqua
equal-aquaOP•3y ago
So how will this work? Still cant figure it out Right now I have something like this: const itemListQuery = useQuery(['data', campaign, authToken], () => getData(campaign, authToken)); So if I want to for example add param 'Number_Calls' ( just like in a picture i send before) I just have to add -> useQuery(['data', campaign, authToken, conPerLeadStart, conPerLeadEnd] ? How will it know that it should make url like '.../&number_calls={x},{y} ?
optimistic-gold
optimistic-gold•3y ago
that's right. it doesn' t make the url for you - you have to build the url you can either use closures like you did above: 
useQuery(['data', campaign, authToken], () => getData(campaign, authToken));
useQuery(['data', campaign, authToken], () => getData(campaign, authToken));
or use the queryKey passed into the queryFn: 
useQuery(['data', campaign, authToken], ({ queryKey }) => getData(queryKey[1], queryKey[2]));
useQuery(['data', campaign, authToken], ({ queryKey }) => getData(queryKey[1], queryKey[2]));
other-emerald
other-emerald•3y ago
We have wrapped the fetch function (and use it as default with react-query), and there we assume all query keys are equal to the path segments of the request. And if there's an object in the key, it will be appended as a query string. Some code we use: 
// Turns an object of query parameters into a query string
function qs(params: QueryParams | Null): string {
  if (params == null) return '';
  const qs = Object.entries(params)
    .filter(([, value]) => value != null)
    .map((p) => p as [string, string | number | boolean])
    .map(
      ([key, value]) =>
        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
    )
    .join('&');
  return qs !== '' ? '?' + qs : '';
}

// Makes a URL out of a query key
function constructUrl(baseUrl: string, queryKey: QueryKey): string {
  return (
    baseUrl +
    queryKey.map((k) => (typeof k === 'object' ? qs(k) : String(k))).join('/')
  );
}

// Then, in the fetch function, to get the final URL:
const url = constructUrl(baseUrl, path);
// Turns an object of query parameters into a query string
function qs(params: QueryParams | Null): string {
  if (params == null) return '';
  const qs = Object.entries(params)
    .filter(([, value]) => value != null)
    .map((p) => p as [string, string | number | boolean])
    .map(
      ([key, value]) =>
        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
    )
    .join('&');
  return qs !== '' ? '?' + qs : '';
}

// Makes a URL out of a query key
function constructUrl(baseUrl: string, queryKey: QueryKey): string {
  return (
    baseUrl +
    queryKey.map((k) => (typeof k === 'object' ? qs(k) : String(k))).join('/')
  );
}

// Then, in the fetch function, to get the final URL:
const url = constructUrl(baseUrl, path);
equal-aqua
equal-aquaOP•3y ago
Ooo, that's how it works! So basically I pass all paramas to useQuery, so -> useQuery(['data', campaign, authToken, X, Y, Z], () => getData(campaign, authToken, X, Y, Z)); and then in my 'getData' function with axios I simply pass params (params : { 1: X, 2: Y,Z } to my url

Did you find this page helpful?