Type help for default queryFn in queryClient

[akeldamas]

I am attempting to create a default query function that accesses the GitHub API and uses the queryKey to specify the desired route. Specifically, I plan to use it for organizations and member lookup, as in this example ["ORG_NAME", "members"], which would correspond to https://api.github.com/ORG_NAME/members. However, I am encountering difficulty in determining the appropriate type to use for the queryFn in the QueryClient. While I have reviewed the documentation, it does not provide any TypeScript guidance.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "react-query";

const queryGithubOrginisation = ({ queryKey <--- What type? }) => {
  const BASE_URL = `https://api.github.com/`;
  let queryParams = "";
  if (typeof queryKey[queryKey.length - 1] === "object") {
    const paramsObject = queryKey.pop();
    queryParams = "?" + new URLSearchParams(paramsObject).toString();
  }

  const apiPath = queryKey.join("/");
  const requestUrl = `${BASE_URL}${apiPath}${queryParams}`;

  return fetch(requestUrl).then((res) => res.json());
};

export default function App({ Component, pageProps }: AppProps) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        queryFn: queryGithubOrginisation,
      },
    },
  });

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

[TkDodo]

You can use the type QueryFunctionContext to type the whole object:

import { QueryClient, QueryClientProvider, QueryFunctionContext } from "react-query";

const queryGithubOrginisation = ({ queryKey }: QueryFunctionContext) => {

the queryKey itself will be of type QueryKey.