Loaders deps less verbose

[andredewaard]

Is there a way to make the loaderDeps functionality a bit less verbose?
I have a api call to filter certain claims with 8 filters (which can still grow a lot) but using the loaderDeps will clutter my file by a lot

export const Route = createFileRoute('/_app/claims/')({
  validateSearch: zodSearchValidator(ClaimsRequest),
  loaderDeps: ({ search: { pageNumber,
    pageSize,
    search,
    column,
    desc,
    eventTypes,
    registers,
    destuctionDegrees } }) => ({
      pageNumber,
      pageSize,
      search,
      column,
      desc,
      eventTypes,
      registers,
      destuctionDegrees
    }),
  loader: ({ deps: {
    pageNumber,
    pageSize,
    search,
    column,
    desc,
    eventTypes,
    registers,
    destuctionDegrees
  } }) => queryClient.ensureQueryData(claimsQueries.get({
    filters: {
      pageNumber,
      pageSize,
      search,
      column,
      desc,
      eventTypes,
      registers,
      destuctionDegrees
    }
  })),
  component: () => Claims()
})

I can simplify this by a little by not destructuring the deps

  validateSearch: zodSearchValidator(ClaimsRequest),
  loaderDeps: ({ search: { pageNumber,
    pageSize,
    search,
    column,
    desc,
    eventTypes,
    registers,
    destuctionDegrees } }) => ({
      pageNumber,
      pageSize,
      search,
      column,
      desc,
      eventTypes,
      registers,
      destuctionDegrees
    }),
  loader: ({ deps }) => queryClient.ensureQueryData(claimsQueries.get({ filters: deps })),

But this will result in unnecessary deps in the query being pushed into the api like &test=1 will be included into the call.

I really like the loader in combination with the validateSearch and loaderDeps i just wish there is a bit of a cleaner way to do this.

[schiller-manuel]

we have a function pick in router, although it's exported it's not part of the public API.

you could use it like this:

export function pick<TValue, TKey extends keyof TValue>(
  parent: TValue,
  keys: Array<TKey>,
): Pick<TValue, TKey> {
  return keys.reduce((obj: any, key: TKey) => {
    obj[key] = parent[key]
    return obj
  }, {} as any)
}

export const Route = createFileRoute('/_app/claims/')({
  validateSearch: zodSearchValidator(ClaimsRequest),
  loaderDeps: ({ search }) => pick(search, [
      'pageNumber',
      'pageSize',
      'search',
      'column',
      'desc',
      'eventTypes',
      'registers',
      'destuctionDegrees'
    ]),
  loader: ({ deps }) => queryClient.ensureQueryData(claimsQueries.get({
    filters: deps
  })),
  component: () => Claims()
})

I don't get the part about "But this will result in unnecessary deps in the query being pushed into the api like &test=1 will be included into the call"
can you please explain?

[andredewaard]

sorry if i wasn't clear, if a user adds a search param to the url like &test=1 it would be in deps also. Hopefully that makes sense.

[andredewaard]

Nevermind, using your approach other search params are not included in the api request.

also updated your Pick function to be a bit more type safe

export function pick<TValue, TKey extends keyof TValue>(
  parent: TValue,
  keys: Array<TKey>,
): Pick<TValue, TKey> {
  return keys.reduce((obj: Partial<Pick<TValue, TKey>>, key: TKey) => {
    obj[key] = parent[key]
    return obj
  }, {}) as Pick<TValue, TKey>
}

[schiller-manuel]

with the new search.strict flag you might even be able to directly use search if all of it should go into loaderDeps

https://tanstack.com/router/latest/docs/framework/react/api/router/RouterOptionsType#searchstrict-property

[andredewaard]

Thanks! this seems to work:

  loaderDeps: ({ search }) => search,
  loader: ({ abortController, deps }) => queryClient.prefetchQuery(claimsQueries.get({
    signal: abortController.signal, filters: deps
  })),

even with search.strict set to false