useQuery + query-key-factory formatting question

[div-cowboy]

In a previous app I built, I used the following pattern which I loved, but when I tried to setup a new project this weekend, I started getting this error. The functionality works as intended (hydration + prefetch), but I can't figure out how to remove this type error. Appreciate any guidance on this 🙏

No overload matches this call.
The last overload gave the following error.
Argument of type '{ queryFn: QueryFunction<any, readonly ["posts", "allPosts", string]>; queryKey: readonly ["posts", "allPosts", string]; }' is not assignable to parameter of type 'QueryKey'.
Type '{ queryFn: QueryFunction<any, readonly ["posts", "allPosts", string]>; queryKey: readonly ["posts", "allPosts", string]; }' is missing the following properties from type 'readonly unknown[]': length, concat, join, slice, and 26 more.ts(2769)
useQuery.d.ts(16, 25): The last overload is declared here.

useAllPosts.tsx

import { UseQueryResult, useQuery } from "@tanstack/react-query";
import { BlogPostRecord } from "lib/generated-types";
import { queries } from "lib/queries-ts/rq";

export function useAllPosts(): UseQueryResult<BlogPostRecord[], unknown> {
  return useQuery({
    ...queries.posts.allPosts(),
  });
}

export default useAllPosts;

single-post.ts

import { createQueryKeys } from "@lukemorales/query-key-factory";
import { getBlogPostByHandle, getBlogPosts } from "lib/post";

export const posts = createQueryKeys("posts", {
  singleFullPost: (slug: string) => ({
    queryKey: [slug],
    queryFn: () => getBlogPostByHandle(slug),
  }),
  allPosts: () => ({
    queryKey: ["getPosts"],
    queryFn: () => getBlogPosts(),
  }),
});

queries.ts

import {
  inferQueryKeyStore,
  inferQueryKeys,
  mergeQueryKeys,
} from "@lukemorales/query-key-factory";

import { posts } from "./single-post";

export const queries = mergeQueryKeys(posts);

export type PostsKeys = inferQueryKeys<typeof posts>;

export type QueryKeys = inferQueryKeyStore<typeof queries>;

post.ts

import ALL_BLOG_POSTS_QUERY from "./queries-ts/allBlogPosts";

export async function getBlogPosts(): Promise<any> {
  const query = ALL_BLOG_POSTS_QUERY;

  const variables = {};

  const { allBlogPosts } = (await datoRequest(query, variables)) as {
    allBlogPosts: BlogPostRecord[];
  };

  return allBlogPosts;
}

package.json

{
  "name": "samv9",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate-ts-types": "graphql-codegen --config graphql.config.yml"
  },
  "dependencies": {
    "@graphql-codegen/cli": "^4.0.0",
    "@graphql-codegen/typed-document-node": "^5.0.0",
    "@graphql-codegen/typescript": "^4.0.0",
    "@graphql-codegen/typescript-operations": "^4.0.0",
    "@graphql-typed-document-node/core": "^3.2.0",
    "@lukemorales/query-key-factory": "^1.0.3",
    "@next/font": "13.4.3",
    "@tanstack/react-query": "^4.23.0",
    "@tanstack/react-query-devtools": "^4.23.0",
    "@types/node": "20.2.1",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "@types/react-syntax-highlighter": "^15.5.7",
    "@types/styled-components": "^5.1.26",
    "clsx": "^1.2.1",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.3",
    "framer-motion": "^10.12.18",
    "graphql": "^16.6.0",
    "graphql-request": "^6.1.0",
    "graphql-tag": "^2.12.6",
    "hamburger-react": "^2.5.0",
    "next": "13.4.3",
    "next-seo": "^6.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intersection-observer": "^9.5.2",
    "react-player": "^2.12.0",
    "react-syntax-highlighter": "^15.5.0",
    "styled-components": "^5.3.10",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "eslint-plugin-unused-imports": "^2.0.0"
  }
}

[TkDodo]

if you have TS errors, please show a typescript playground:

https://www.typescriptlang.org/play