Hello, with React query i naturally have this scenario:

-list of customers by account filtered by order by

how i map this to cache keys is:

`function customersByAccountId(accountId: number) { return ["customerListByAccountId", accountId]; }

function customersByAccountIdFiltered(accountId: number, queryFilter: QueryFilter) { return [...customersByAccountId(accountId), "list", { queryFilter }]; }`

This way, when i edit an attribute for a customer, i can: update the in memory query for customersByAccountIdFiltered (which will change the attribute on the current screen, without reload)

and invalidate customersByAccountId (with refetchActive: false,) which will invalidate all other cached filtered entries.

How do i map this with query-key-factory?

H! I'm trying to use the library (v1.0.0 and v1.0.1) but I got this error with a simple implementation: Exported variable 'userQueries' has or is using name 'QueryFunctionContext' from external module ".../node_modules/@lukemorales/query-key-factory/dist/index" but cannot be named. ts(4023)

Code:

import { createQueryKeyStore } from "@lukemorales/query-key-factory";
export const userQueries = createQueryKeyStore({ <<< error in this line.
  user: { me: null },
});

Literally that's all my code, if I do not export it, all works fine and I can use TanStack Query without problems.

What am I doing wrong?

Maybe I dont get something but this code produces this error: Type '[string, string]' is not assignable to type 'readonly [ValidValue]'. Source has 2 element(s) but target allows only 1.

export const keys = createQueryKeys('user', {
  byId: (accountId: string, userId: string) => ({
    queryKey: [accountId, userId],
    contextQueries: {
      likes: null,
    },
  }),
});

I'm getting some typescript errors following the examples in the readme and can't quite figure out what they mean or why they are happening.

I copied exactly the todosKeys example and am getting the following errors related to specific lines

single: (id: string) => id,

Type '(id: string) => string' is not assignable to type 'FactoryProperty'.

Type '(id: string) => string' is not assignable to type 'FactoryCallback'.

Type 'string' is not assignable to type 'AnyObject'.

Type '(id: string) => string' is not assignable to type 'FactoryProperty'.
  Type '(id: string) => string' is not assignable to type 'FactoryCallback'.
    Type 'string' is not assignable to type 'AnyObject'.ts(2322)
QueryKeys.ts(11, 11): Did you mean to call this expression?

One of the other ones is this line

search: (query: string, limit: number) => [query, { limit }],

Type '(query: string, limit: number) => (string | { limit: number; })[]' is not assignable to type 'FactoryProperty'.

Type '(query: string, limit: number) => (string | { limit: number; })[]' is not assignable to type 'FactoryCallback'.

Type '(string | { limit: number; })[]' is not assignable to type 'AnyObject'.

Index signature for type 'string' is missing in type '(string | { limit: number; })[]'.

(property) search: (query: string, limit: number) => (string | {
    limit: number;
})[]

Type '(query: string, limit: number) => (string | { limit: number; })[]' is not assignable to type 'FactoryProperty'.
  Type '(query: string, limit: number) => (string | { limit: number; })[]' is not assignable to type 'FactoryCallback'.
    Type '(string | { limit: number; })[]' is not assignable to type 'AnyObject'.
      Index signature for type 'string' is missing in type '(string | { limit: number; })[]'.ts(2322)

I love the idea behind your library and would love to figure out why these are happening. I tried upgrading my typescript version to the latest and updating some of the properties in my tsconfig to match the projects but still receive these errors

It would be nice to have a third level in the factory. For example if you have 5 different api urls with 30 endpoints underneed and not only a single one

export const cmsKeys = createQueryKeys('cms', {
  content: {
    page: (locale: string, path: string) => [{ locale, path }],
    breadcrumb: (locale: string, path: string) => [{ locale, path }],
  }
});

So i can have a query like ['cms', 'content', 'page', { locale, path }].

Basically i would have multiple swagger interfaces like this one. So in this case i would like ['bff', 'basket', 'baskets', { basketReference }]

Hi, I am trying to create some context queries but I get an error when I try to access the _ctx. So what am I missing here: https://codesandbox.io/s/tannerlinsley-react-query-basic-typescript-forked-query-keys-factory-hqdnjg?file=/src/queries.ts ?

import { createQueryKeyStore } from "@lukemorales/query-key-factory";
import { useQuery, UseQueryResult } from "@tanstack/react-query";
import { getPostById, getPostComments, getPosts } from "./api";
import { Post } from "./types";

export const queries = createQueryKeyStore({
  posts: {
    all: null,
    list: {
      queryKey: null,
      queryFn: () => getPosts()
    },
    item: (postId: number) => ({
      queryKey: [postId],
      queryFn: () => getPostById(postId),

      contextQueries: {
        comments: {
          queryKey: null,
          queryFn: () => getPostComments(postId)
        }
      }
    })
  }
});
console.log(queries.posts.item(1)); // Does not contain _ctx

export function usePosts(): UseQueryResult<Post[]> {
  return useQuery(queries.posts.list);
}

export function usePost(postId: number): UseQueryResult<Post> {
  return useQuery(queries.posts.item(postId));
}

export function usePostComments(postId: number): UseQueryResult<string[]> {
  return useQuery(queries.posts.item(postId)._ctx.comments);
}

(Copied from Discussions because it seems to have gone unnoticed there.)

Hi,

first off, thanks for the great package! I've been wanting to have something like this ever since I started using React Query over a year ago.

The feature I propose is to enable typing of the QueryClient's setQueryData function. Through the queryFn field defined on the queries in the createQueryKeyStore function, we already give the type information of the data that this query will hold. Based on that we could type the setQueryFunction to accept only this type.

The advantage is big: Currently, you can set the query data to any data you like, and then the type promise that useQuery() gives your components no longer holds true. It is up to the developer to keep track which query keys should contain what data types, and pass the right data every time. There are no type checks.

Example:

import { createQueryKeyStore } from "@lukemorales/query-key-factory";
import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";

type User = {
    name: string;
};

const api = {
    getUser: (userId: string): User => ({
        name: "John",
    }),
};

export const queries = createQueryKeyStore({
  users: {
    all: null,
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
    }),
  },
});

export const App = () => {
    const query = useQuery(queries.users.detail('14'));
    if (query.isSuccess) {
      // `query.data` is of type `User`, so it knows what type this query holds
      // we can safely access `query.data.name` and it will work
    }

    const queryClient = useQueryClient();
    queryClient.setQueryData(queries.users.detail('14').queryKey, () => ({
        // we can just pass any data here, including an object that contains no `name`
        // which will break the code above trying to access `name`
        email: "[email protected]",
    }));
}

And other functions such as getQueryData should also be type-safe.

Use cases include Update from Mutation Responses and Optimistic Updates.

As for the technical realization, either we could override React Query's type for QueryClient to be type safe using Module Augmentation, or by exporting our own TypedQueryClient and useTypedQueryClient() hooks are just wrappers around the original but with the proper type.

Hey 👋 , first of all, thank you for creating this awesome lib 🙏 I have problems using it with @tanstack/react-query-devtools.

Here is an example from stack blitz, where you can reproduce the error: https://stackblitz.com/edit/nextjs-nsf8wi?file=pages/index.js

Steps to reproduce the error:

1. Open query dev tools in the UI
2. Click on the stringKey query -> all works fine as this query key was not created with this lib
3. Click on the queryFactoryKey query -> whole UI breaks with throw error TypeError: 'get' on proxy: property 'prototype' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '[object Array]' but got '[object Array]')

For me (and probably many more devs) React Query Devtools are essential when using React Query, so this error is blocking me from using this awesome lib 😞

First, nice work with this library!

I think this library could provide a little helper to get the type of the queryKey passed to the queryFn, do you think that makes sense?

The helper would look like this:

import { useQuery, QueryFunctionContext } from '@tanstack/react-query'
import { createQueryKeys, inferQueryFactory } from "@lukemorales/query-key-factory"

export const productsKeys = createQueryKeys('products', {
  bestSelling: null,
  search: (query: string, limit = 15) => ({ query, limit }),
  byId: (productId: string) => ({ productId }),
});

type ProductKeys = inferQueryFactory<typeof productsKeys>

const fetchTodos = (context: QueryFunctionContext<ProductKeys['byId']>) => {
  const queryKey = context.queryKey // readonly ['products', 'byId', { productId: string }]

  // fetch todos...
}

useQuery(productsKeys.byId('product-id'), fetchTodos)

Many projects use sindresorhus's eslint-plugin-unicorn. It's recommended config includes the no-null rule. Here is the reasoning behind not using null 1, 2, 3.

I suppose it would make sense to replace it with an empty array [].

Hi,

Awesome library, been doing a lot of refactoring using this package...

Is it possible to use this along with the useInfiniteQuery hook? Haven't been able to find any examples to do so.

Thanks!

As a Vue user it would be really nice if I could use Computed props a key names See this example from tanstack query website ->

// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: () => getUserByEmail(email.value),
})

const userId = computed(() => user.value?.id)
const enabled = computed(() => !!user.value?.id)

// Then get the user's projects
const { isIdle, data: projects } = useQuery({
  queryKey: ['projects', userId],
  queryFn: () => getProjectsByUser(userId.value),
  enabled, // The query will not execute until `enabled == true`
})

Currently I get an type error when I translate this example to the query key factory. https://tanstack.com/query/v4/docs/vue/guides/dependent-queries

Taking this from the example:

export const users = createQueryKeys('users', {
  list: () => ({
    queryKey: [],
    queryFn: () => api.findAll(),
  }),
});

export function useUserList() {
  return useQuery(users.list);
};

When doing:

export function useUserDetail(id: string) {
  return useQuery<User[], Error>(users.list);
};

you get:

"Type 'NonNullable<TQueryFnData> | never[]' is not assignable to type 'User[]'

I'm afraid I'm having trouble using either codesandbox or stackblitz on my computer, so I can't provide a repro here :( I did consider providng a failing test, but you don't seem to test against useQuery directly in this repo according to the code search.

The query does work just fine though, but I want to be able to type the second param as Error

As I start to use this library, I noticed the following pattern coming up quite a bit..

const users = createQueryKeys('users', {
  byId: ({ id }) => ({
    queryKey: [{ id }],
    queryFn: () => api.getUser({id}),
  }),
  loggedIn: ({ id }) => ({
    queryKey: [{ id }],
    queryFn: () => api.getLoggedInUsers({id}),
  }),
  active: ({ id }) => ({
    queryKey: [{ id }],
    queryFn: () => api.getActiveUsers({id}),
  }),
...

One way to avoid this is with a helper function that takes in a key, and defines that as the parameters for the query function (1-1 relationship). Something like this (defineQuery or querify):

const defineQuery = (queryKey, queryFn) => ({
  queryKey: [queryKey],
  queryFn: () => queryFn(queryKey),
});

The end result is:

const users = createQueryKeys('users', {
  byId: ({id}) => defineQuery({ id }, api.getUser),
  loggedIn: ({id}) => defineQuery({ id }, api.getLoggedInUsers),
  active: ({id}) => defineQuery({ id }, api.getActiveUsers),
...

The nice thing about including this as a helper function is you don't have to force that particular style and users can opt-in as needed. Similar to #18.

What do you think about allowing all useQuery options, in order to allow more complex definitions?

For instance, if we wanted to always run this detail query with refetchOnMount set to 'always':

  export const users = createQueryKeys('users', {
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
    }),
  });

to

  export const users = createQueryKeys('users', {
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
      refetchOnMount: 'always', // add refetchOnMount set to 'always'
      ...more useQuery options here...
    }),
  });

And so on..

before:

export const queries = createQueryKeyStore({
  users: {
    all: null,
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
    }),
  },
  todos: {
    detail: (todoId: string) => [todoId],
    list: (filters: TodoFilters) => ({
      queryKey: [{ filters }],
      queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
      contextQueries: {
        // here ->
        subTodos: ()=> ({ 
          queryKey: [] as unknown as [string],
          contextQueries: {
            search: (query: string, limit = 15) => ({
              queryKey: [query, limit],
              queryFn: (ctx) =>
                api.getSearchTodos({
                  page: ctx.pageParam,
                  filters,
                  limit,
                  query,
                }),
            }),
          },
        }),
      },
    }),
  },
});
queries.todos.list(filters)._ctx.subTodos()._ctx.search(query, limit)

after:

export const queries = createQueryKeyStore({
  users: {
    all: null,
    detail: (userId: string) => ({
      queryKey: [userId],
      queryFn: () => api.getUser(userId),
    }),
  },
  todos: {
    detail: (todoId: string) => [todoId],
    list: (filters: TodoFilters) => ({
      queryKey: [{ filters }],
      queryFn: (ctx) => api.getTodos({ filters, page: ctx.pageParam }),
      contextQueries: {
        // here ->
        subTodos: {
          contextQueries: {
            search: (query: string, limit = 15) => ({
              queryKey: [query, limit],
              queryFn: (ctx) =>
                api.getSearchTodos({
                  page: ctx.pageParam,
                  filters,
                  limit,
                  query,
                }),
            }),
          },
        },
      },
    }),
  },
});
queries.todos.list(filters)._ctx.subTodos._ctx.search(query, limit)

Hello, I patched this locally, but figured I would also submit upstream.

This PR replaces the types marked internal in the most recent release with the actual types from @tanstack/query-core.

As of v1.0.3, the types marked internal are still being included in the build. When used in a project alongside TanStack Query, this duplication is causing TS to use the query-key-factory versions in place of (alongside?) the official TanStack types.

This PR should fix those issues and ensure any future changes to TanStack Query's types stay in sync with this package.