sensitive-blue

quearyKey type issue

I was expecting QueryKey, but you passed { queryKey: string[]; queryFn: (searchString: string) => Promise<any>; }

6 Replies

sensitive-blueOP•3y ago

Can anybody help me with this error. I'm not getting the solutions of this error

const { data, isLoading, isFetching } = useQuery<Data<RegionType>>({
    queryKey: ["region", query],
    queryFn: getData,
  });

const { data, isLoading, isFetching } = useQuery<Data<RegionType>>({
    queryKey: ["region", query],
    queryFn: getData,
  });

This is the query where I'm getting issue with "queryKey"

extended-salmon•3y ago

Don't pass generics to useQuery

sensitive-blueOP•3y ago

then what instead

extended-salmon•3y ago

just .. nothing. type inference: https://tanstack.com/query/v4/docs/react/typescript#type-inference

TypeScript | TanStack Query Docs

React Query is now written in TypeScript to make sure the library and your projects are type-safe! Things to keep in mind:

sensitive-blueOP•3y ago

const { data, isLoading, isFetching } = useQuery<Data<RegionType>>({
    queryKey: ["region"],
    queryFn: getData,
  });

const { data, isLoading, isFetching } = useQuery<Data<RegionType>>({
    queryKey: ["region"],
    queryFn: getData,
  });

It also didn't work I don't understood what to do. can you pls help me some by explaining some Please

const getData = async (searchString: any) => {
  console.log(searchString);
  const res = await fetch(
    "http://localhost:5200/region?searchString=" + searchString
  );
  const data = await res.json();
  return data;
};

export default function Region() {
  const [query, setQuery] = useDebouncedState("", 200);
  const { data, isLoading, isFetching } = useQuery<Data<RegionType>>({
    queryKey: ['region'],
    queryFn: getData,
  });

const getData = async (searchString: any) => {
  console.log(searchString);
  const res = await fetch(
    "http://localhost:5200/region?searchString=" + searchString
  );
  const data = await res.json();
  return data;
};

export default function Region() {
  const [query, setQuery] = useDebouncedState("", 200);
  const { data, isLoading, isFetching } = useQuery<Data<RegionType>>({
    queryKey: ['region'],
    queryFn: getData,
  });

This is the error I'm getting when I change the type of (searchString: string) I donnow what 's wrong with it Hey @TkDodo 🔮 We just solved this issue buy adding search function inside the quearyFn function

const {data,isLoading,isFetching} = useQuery<Data<BrickType>>({
    queryKey:['bricks',query],
    queryFn:async ()=>{
      let url = "http://localhost:5200/bricks"
      if(query)  url = url + query;
      const res = await fetch(
        url
      );
      const data = await res.json();
      return data;
    }
  })
  !isLoading && console.log(data);
  const [updateSite, setUpdateSite] = useState(0); //<typeof companies[0] | null>(null);
  const form = useForm({
    initialValues: {
      id: Number,
      name: string,
      streetAddress: string,
      city: string,
      state: string,
      missionStatement: string,
    },
  });

const {data,isLoading,isFetching} = useQuery<Data<BrickType>>({
    queryKey:['bricks',query],
    queryFn:async ()=>{
      let url = "http://localhost:5200/bricks"
      if(query)  url = url + query;
      const res = await fetch(
        url
      );
      const data = await res.json();
      return data;
    }
  })
  !isLoading && console.log(data);
  const [updateSite, setUpdateSite] = useState(0); //<typeof companies[0] | null>(null);
  const form = useForm({
    initialValues: {
      id: Number,
      name: string,
      streetAddress: string,
      city: string,
      state: string,
      missionStatement: string,
    },
  });

This solved my issue

extended-salmon•3y ago

look, what you'd want is that your getData has a proper return type. since it just calls fetch, it likely returns any now. give it a good type:

const getData = async (): Promise<Data<RegionType>> = ...

const getData = async (): Promise<Data<RegionType>> = ...

then, once you have a properly typed getData function, you can leverage type inference on useQuery:

const query = useQuery({
  queryKey: ["region"],
  queryFn: getData,
});

const query = useQuery({
  queryKey: ["region"],
  queryFn: getData,
});

note that I have removed the generics that you manually passed to useQuery:

useQuery<Data<RegionType>>

useQuery<Data<RegionType>>

became just a useQuery like you would write it in JavaScript as well. The more your TS code looks like JS, the better. the problem with passing generics manually is that useQuery actually has 4 generics, and by providing only one of them, you set the other 3 to their default values. I have a whole blogpost on that topic as well: https://tkdodo.eu/blog/react-query-and-type-script

React Query and TypeScript

Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety.

Gaming

Programming

quearyKey type issue

Did you find this page helpful?