defineQuery helper function

[codebycarlos]

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.

[codebycarlos]

In an ideal world we could even have a toggable option to automatically generate the queryKey based on the queryFn parameters, although I'm not sure how feasable that might be..

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

[lukemorales]

In an ideal world we could even have a toggable option to automatically generate the queryKey based on the queryFn parameters, although I'm not sure how feasable that might be..

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

I think I tried a similar concept while developing v1, but I had no luck

[lukemorales]

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.

I think that's a great idea @codebycarlos! It'd be awesome if you wanna have a take on implementing this. The only thing I would change is injecting the defineQuery in the second argument, like this:

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