How can I pass a query param as an argument with React Query?

user_12954914 0
Viewed 3076

I am making use of useQuery from react-query and I need to dynamically pass the query parameter

But i am struggling to get the types to work correctly

query function

interface ProfileResponse {
  photo: string
  about: string
  languages: number[] | null
  userid: number
}

export const get_profile_q= (uid: number) =>
  api.get(`/api/profile/${uid}`) as Promise<UseQueryResult<ProfileResponse>>

used inside component

const { refetch: getProfile } = useQuery([PK.get_profile, {uid: 1}], get_profile_q)
// ^^^ throwing typescript error

error

Type '(uid: number) => Promise<UseQueryResult<ProfileResponse, unknown>>' 
has no properties in common with type 'Omit<UseQueryOptions<unknown, unknown, unknown, 
(string | { uid: number; })[]>, "queryKey">'.
react-query reactjs
1 Answers

Here's a little example that can do a dynamic query - note the query KEY is also dynamic. Each query has to have its own key.

import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import React from "react";
import "./styles.css";

interface IPost {
  userId: number;
  id: number;
  title: string;
  body: string;
}

const getData = async (id: number): Promise<IPost> => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  return await response.json();
};

export const Example = () => {
  const [post, setPost] = React.useState<IPost>();
  const [postId, setPostId] = React.useState(0);

  const { data, refetch } = useQuery<IPost>(
    `queryKey${postId}`,
    async () => await getData(postId)
  );

  React.useEffect(() => {
    setPost(data);
  }, [data]);

  return (
    <>
      <input
        value="click 1"
        type="button"
        onClick={() => {
          setPostId(1);
          refetch();
        }}
      />
      <input
        value="click 2"
        type="button"
        onClick={() => {
          setPostId(2);
          refetch();
        }}
      />
      <div>{post?.title}</div>
    </>
  );
};

export default function App() {
  const queryClient = new QueryClient();

  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <h1>Hello CodeSandbox</h1>
        <Example />
      </QueryClientProvider>
    </div>
  );
}
Nikki9696_4566690
Related