T
TanStack•8mo ago
stormy-gold

Keeping large object in search params causing too long URL.

How you deal with large objects stored in search params? In my example, conditions of TableView can easily grow, that's why when user refresh page gets error Uri to long, how avoid that keeping all functionalities of shared link etc. of Tanstack Router. 
/* =========================================
   PRODUCTS STATISTICS
   ========================================= */

// Default values for Products Statistics
const DEFAULT_PRODUCTS_SORT_KEY = 'totalIncome';
const DEFAULT_PRODUCTS_SORT_DIRECTION = 'DESC';
const DEFAULT_PRODUCTS_PAGE_SIZE = 50;
const DEFAULT_PRODUCTS_PAGE_INDEX = 1;

export const productsStatisticsTableViewSchema = z.object({
  pagination: PaginationSchema.default({
    pageIndex: DEFAULT_PRODUCTS_PAGE_INDEX,
    pageSize: DEFAULT_PRODUCTS_PAGE_SIZE,
  }),
  sorting: SortSchema.default({
    order: DEFAULT_PRODUCTS_SORT_DIRECTION as 'ASC' | 'DESC',
    key: DEFAULT_PRODUCTS_SORT_KEY,
  }),
  search: SearchSchema.default({
    searchType: 'all',
    search: '',
    comparator: 'contains',
  }),
  filters: FilterQuerySchema.default({
    conditions: [],
    logicalOperator: ComparatorName.AND,
  }),
});

export type ProductsStatisticsTableViewType = z.infer<typeof productsStatisticsTableViewSchema>;

export const getDefaultProductsStatisticsTableView = () =>
  productsStatisticsTableViewSchema.parse({});

export const productsStatisticsRoute = createRoute({
  getParentRoute: () => statisticsRoute,
  path: 'products',
  validateSearch: search =>
    z
      .object({
        productsStatisticsTableView: productsStatisticsTableViewSchema,
      })
      .parse(search),
  preSearchFilters: [search => search],
  component: () => <ProductsStaticticsContainer />,
});
/* =========================================
   PRODUCTS STATISTICS
   ========================================= */

// Default values for Products Statistics
const DEFAULT_PRODUCTS_SORT_KEY = 'totalIncome';
const DEFAULT_PRODUCTS_SORT_DIRECTION = 'DESC';
const DEFAULT_PRODUCTS_PAGE_SIZE = 50;
const DEFAULT_PRODUCTS_PAGE_INDEX = 1;

export const productsStatisticsTableViewSchema = z.object({
  pagination: PaginationSchema.default({
    pageIndex: DEFAULT_PRODUCTS_PAGE_INDEX,
    pageSize: DEFAULT_PRODUCTS_PAGE_SIZE,
  }),
  sorting: SortSchema.default({
    order: DEFAULT_PRODUCTS_SORT_DIRECTION as 'ASC' | 'DESC',
    key: DEFAULT_PRODUCTS_SORT_KEY,
  }),
  search: SearchSchema.default({
    searchType: 'all',
    search: '',
    comparator: 'contains',
  }),
  filters: FilterQuerySchema.default({
    conditions: [],
    logicalOperator: ComparatorName.AND,
  }),
});

export type ProductsStatisticsTableViewType = z.infer<typeof productsStatisticsTableViewSchema>;

export const getDefaultProductsStatisticsTableView = () =>
  productsStatisticsTableViewSchema.parse({});

export const productsStatisticsRoute = createRoute({
  getParentRoute: () => statisticsRoute,
  path: 'products',
  validateSearch: search =>
    z
      .object({
        productsStatisticsTableView: productsStatisticsTableViewSchema,
      })
      .parse(search),
  preSearchFilters: [search => search],
  component: () => <ProductsStaticticsContainer />,
});
3 Replies
wise-white
wise-white•8mo ago
did you try https://tanstack.com/router/v1/docs/framework/react/guide/custom-search-param-serialization#using-the-zipson-library
Custom Search Param Serialization | TanStack Router React Docs
Diagram showing idempotent nature of URL search param serialization and deserializationBy default, TanStack Router parses and serializes your URL Search Params automatically using JSON.stringify and JSON.parse. This process involves escaping and unescaping the search string, which is a...
stormy-gold
stormy-goldOP•8mo ago
I am parsing with JSURL2, but what to do when is not enough? 
import { parseSearchWith, stringifySearchWith } from '@tanstack/react-router';
import * as JSURL from 'jsurl2';

export function decodeFromBinary(str: string): string {
  return decodeURIComponent(
    Array.prototype.map
      .call(atob(str), function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      })
      .join('')
  );
}

export function encodeToBinary(str: string): string {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
      return String.fromCharCode(parseInt(p1, 16));
    })
  );
}

export const parseSearchFn = parseSearchWith(value => JSURL.parse(value));

export const stringifySearchFn = stringifySearchWith(value => JSURL.stringify(value));


const router = createRouter({
  routeTree,
  defaultPendingComponent: () => <LoadingOverlay pending loadingText="Ładowanie" />,
  context: {
    queryClient: client,
    user: null,
  },
  defaultPreload: 'intent',
  // defaultPreloadStaleTime: 0,
  // defaultViewTransition: true,
  parseSearch: parseSearchFn,
  stringifySearch: stringifySearchFn,
  trailingSlash: 'never',
});
import { parseSearchWith, stringifySearchWith } from '@tanstack/react-router';
import * as JSURL from 'jsurl2';

export function decodeFromBinary(str: string): string {
  return decodeURIComponent(
    Array.prototype.map
      .call(atob(str), function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      })
      .join('')
  );
}

export function encodeToBinary(str: string): string {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
      return String.fromCharCode(parseInt(p1, 16));
    })
  );
}

export const parseSearchFn = parseSearchWith(value => JSURL.parse(value));

export const stringifySearchFn = stringifySearchWith(value => JSURL.stringify(value));


const router = createRouter({
  routeTree,
  defaultPendingComponent: () => <LoadingOverlay pending loadingText="Ładowanie" />,
  context: {
    queryClient: client,
    user: null,
  },
  defaultPreload: 'intent',
  // defaultPreloadStaleTime: 0,
  // defaultViewTransition: true,
  parseSearch: parseSearchFn,
  stringifySearch: stringifySearchFn,
  trailingSlash: 'never',
});
@Manuel Schiller
wise-white
wise-white•8mo ago
did you try zipson? how does your data look like currently? can you post such a huge real json please?

Did you find this page helpful?