Unable to use contextQueries when key contains 2 variables

[Kamahl19]

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,
    },
  }),
});

[Kamahl19]

Here is the codesandbox link https://codesandbox.io/s/bold-http-w1wpbp?file=/pages/index.tsx

[lukemorales]

Hi @Kamahl19, as you can see in the release notes for v1.0, the queryKey value needs to be a 1 element tuple with a primitive or an object:

So for you case you'd need for it to be:

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

[Kamahl19]

@lukemorales Hey, thanks for the response. What is the reason of this constrain? [accountId, reviewId] is a perfectly valid key. Why not support it?

Also why is an array allowed here

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

but not here

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

It should return the same output, no?

[lukemorales]

@lukemorales Hey, thanks for the response. What is the reason of this constrain? [accountId, reviewId] is a perfectly valid key. Why not support it?

You're correct @Kamahl19, [accountId, reviewId] is indeed a valid key, however in order to provide the type safety this lib provides, some sort of constraint was needed in order to iterate over the queryOptions/contextualQueries object and infer properly the query key values. Not that it's not possible, but the type-system would increase a lot in complexity and it's pretty complex as is, and I don't think the added complexity pays off the end result, so I decided to go with a small amount of opinion there to achieve the end result we have today.

Also why is an array allowed here

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

but not here

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

It should return the same output, no?

To be honest, that seems like a left over from the past implementation that shouldn't be there 😅. The javascript output should indeed be the same, however the inferred types are not, and like I mentioned earlier, it was a tradeoff in order to introduce the nested queries and query options feature while not making the type system more complex than it need to be

[Kamahl19]

@lukemorales Are you saying all the keys should be 1 item tuples [{ keys }] ?

[lukemorales]

@Kamahl19 yes, the tuple can contain a primitive or an object:

[string]
[number]
[boolean]
[{ keys }]

[Kamahl19]

@lukemorales Understood, thanks. I was confused by probably outdated examples such as https://github.com/lukemorales/query-key-factory/blob/main/README.md?plain=1#L56 and
https://github.com/lukemorales/query-key-factory/blob/main/README.md?plain=1#L91

[lukemorales]

@Kamahl19 oh yeah, definitely outdated examples, thanks for bringing me attention to them. I'll make sure to update the readme and prevent this confusion again.

[Kamahl19]

@lukemorales Sorry for my naive question but... why not a simple API supporting all valid keys such as:

const queryKeys = createQueryKeys({
  user: () => ({
    key: ['user'],
    children: {
      list: (filters) => ({
        key: ['list', filters],
      }),
      byId: (userId) => ({
        key: ['byId', userId],
        children: {
          likes: () => ({
            key: ['likes'],
          }),
        },
      }),
    },
  }),
});

There is no magic (prepending strings based on obj keys), no null keys, it allows all valid query keys and no _ctx and _def fields.

The output would be:

{
  user: {
    queryKey: ['user'],
    list: (filters) => ({
      queryKey: ['user', 'list', filters],
    }),
    byId: (userId) => ({
      key: ['user', 'byId', userId],
      likes: () => ({
        key: ['user', 'byId', userId, 'likes'],
      }),
    }),
  }
}