Effect CommunityEC
Effect Community•3mo ago
Bence (Arzen)

Reusing Schemas with Tanstack Router and Effect's Libraries

Hey guys. Does anybody played with Tanstack router, Effect's Schema and Effect's Platform?
I have some difficulties to understand how I could reuse the same schema instead of having to define multiple ones for API handler, form validation and search param parsing.

I have the following schemas and code as an example:
// URL Schema
const SearchDataUrlParamsSchema = Schema.standardSchemaV1(
  Schema.Struct({
  'page-number': Schema.Number.pipe(
    Schema.optional,
    Schema.withDefaults({
      constructor: () => DEFAULT_PAGE_NUMBER,
      decoding: () => DEFAULT_PAGE_NUMBER,
    }),
  ),
  'page-size': Schema.Number.pipe(
    Schema.optional,
    Schema.withDefaults({
      constructor: () => DEFAULT_PAGE_SIZE,
      decoding: () => DEFAULT_PAGE_SIZE,
    }),
  ),
  title: Schema.String.pipe(Schema.NullishOr),
  'is-important': Schema.Literal('true', 'false').pipe(Schema.NullishOr),
})

// API
const searchData = HttpApiEndpoint.get('search', '/search')
  .addSuccess(SearchDataResponseSchema)
  .setHeaders(AuthorisationHeaderSchema)
  .setUrlParams(SearchDataUrlParamsSchema)
// etc...

// Tanstack Route
export const Route = createFileRoute('/dashboard/search')({
  validateSearch: SearchDataUrlParamsSchema,
  // etc... 
})

// React Hook Form
const form = useForm({
  resolver: effectTsResolver(SearchDataUrlParamsSchema),
  // etc...
})
Was this page helpful?