T
TanStack•2y ago
adverse-sapphire

Navigate should use input type params not output type params.

Looks like there's not a way to control the input type of search params. calls to navigate still require search params even if they are marked as optional and resolved with default or catch. Unless I'm missing something. Stackblitz with example: https://stackblitz.com/edit/tanstack-router-vkzaga?file=src%2Froutes%2Fposts.tsx 
import * as React from 'react';
import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
import { useSuspenseQuery } from '@tanstack/react-query';
import { postsQueryOptions } from '../postsQueryOptions';
import { z } from 'zod';

const searchSchema = z.object({
  foo: z.number().default(1),
  fiz: z.string().optional(),
});

type ZSearchInput = z.input<typeof searchSchema>;
type ZSearchOutput = z.output<typeof searchSchema>;

export const Route = createFileRoute('/posts')({
  validateSearch: (search: ZSearchInput) => searchSchema.parse(search),
  loader: ({ context: { queryClient } }) =>
    queryClient.ensureQueryData(postsQueryOptions),
  component: PostsComponent,
});

function PostsComponent() {
  const navigate = Route.useNavigate();
  const postsQuery = useSuspenseQuery(postsQueryOptions);
  const posts = postsQuery.data;

  navigate({
    to: '/posts',
    search: {
      // I would expect foo and fiz to both be optional here. Should follow type of ZSearchInput
    },
  });

  return (
    <div className="p-2 flex gap-2">
     ....
    </div>
  );
}
import * as React from 'react';
import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
import { useSuspenseQuery } from '@tanstack/react-query';
import { postsQueryOptions } from '../postsQueryOptions';
import { z } from 'zod';

const searchSchema = z.object({
  foo: z.number().default(1),
  fiz: z.string().optional(),
});

type ZSearchInput = z.input<typeof searchSchema>;
type ZSearchOutput = z.output<typeof searchSchema>;

export const Route = createFileRoute('/posts')({
  validateSearch: (search: ZSearchInput) => searchSchema.parse(search),
  loader: ({ context: { queryClient } }) =>
    queryClient.ensureQueryData(postsQueryOptions),
  component: PostsComponent,
});

function PostsComponent() {
  const navigate = Route.useNavigate();
  const postsQuery = useSuspenseQuery(postsQueryOptions);
  const posts = postsQuery.data;

  navigate({
    to: '/posts',
    search: {
      // I would expect foo and fiz to both be optional here. Should follow type of ZSearchInput
    },
  });

  return (
    <div className="p-2 flex gap-2">
     ....
    </div>
  );
}
mfrancis107
StackBlitz
Tanstack Router - Search Params Input Type - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
2 Replies
like-gold
like-gold•2y ago
this has been discussed previously https://github.com/TanStack/router/issues/1701#issuecomment-2145706277
GitHub
search seems to be inferring the output type of the `validateSear...
Describe the bug I want to validate my search params while also making it optional when navigating from other routes but I'll provide the default value if there isn't one so I'm expecti...
like-gold
like-gold•2y ago
if the documentation is lacking about this please raise a PR to improve this

Did you find this page helpful?