wise-white•3d ago

I having a url like this. Do we have a way to short it but still works like params. Example encoded?

https://ablab.amanotes.net/experiments/show/cee4c6bd-ebcd-4046-8e63-f5b262b14a47?sort[0]=variants.order,ASC&sort[1]=targetings.targeting_details.order,ASC&sort[2]=variants.variant_configs.order,ASC

https://ablab.amanotes.net/experiments/show/cee4c6bd-ebcd-4046-8e63-f5b262b14a47?sort[0]=variants.order,ASC&sort[1]=targetings.targeting_details.order,ASC&sort[2]=variants.variant_configs.order,ASC

12 Replies

kapa.ai•3d ago

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- While refine does offer URL management capabilities, it doesn't provide a specific URL shortening feature for the type of complex URL you've shared. However, refine does have functionality that can help manage URL parameters in a more structured way, which might be relevant to your needs. Refine uses the concept of syncWithLocation to manage URL parameters for things like sorting, filtering, and pagination. This feature encodes the state of components (like tables) into URL parameters, making it easier to share and manage complex URLs. For example, when using useTable hook with syncWithLocation enabled, refine will automatically handle URL parameters for sorting, filtering, and pagination: useTable Documentation

import { useTable } from "@refinedev/core";
useTable({
  syncWithLocation: true,
});

import { useTable } from "@refinedev/core";
useTable({
  syncWithLocation: true,
});

This approach doesn't shorten the URL per se, but it does provide a structured way to manage complex URL parameters within your refine application. If you need to specifically shorten the URL while preserving all parameters, you might need to look into URL shortening services or implement a custom solution outside of refine's scope. The refine framework itself doesn't provide a built-in URL shortening feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wise-whiteOP•3d ago

Yep I means if filtering is too many fields url will too long. So we can encode it then decode for read Yep I means if filtering is too many fields url will too long. So we can encode it then decode for read @kapa.ai

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your concern about long URLs due to multiple filter fields. Refine does offer a solution that can help address this issue by encoding and decoding URL parameters, which is in line with what you're suggesting. Refine uses the lz-string library to compress and encode URL parameters when the syncWithLocation feature is enabled. This approach helps to shorten long URLs while still preserving all the necessary information. Here's how it works: 1. When you use hooks like useTable or useList with syncWithLocation: true, refine automatically compresses and encodes the filter, sort, and pagination parameters. 2. The compressed string is then added to the URL as a single parameter, typically named _filter. 3. When the page is loaded, refine automatically decodes and decompresses this parameter to restore the filter state. This feature is documented in the refine blog: Refine.new - Technical Architecture and Engineering Decisions Explored Part - 1 Here's a relevant excerpt from the documentation:

const compressedString = compressToEncodedURIComponent(codeOutput);

const compressedString = compressToEncodedURIComponent(codeOutput);

This compressed string is what ends up in the URL, significantly reducing its length while still containing all the necessary information. To use this feature, you don't need to do anything special beyond enabling syncWithLocation. Refine will handle the encoding and decoding automatically.

const { tableProps } = useTable({
  syncWithLocation: true,
});

const { tableProps } = useTable({
  syncWithLocation: true,
});

This approach should help you manage complex filtering scenarios without resulting in excessively long URLs, while still allowing you to share and restore the exact state of your data views. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

wise-whiteOP•3d ago

I see your answer. But sometimes I want a friendly URL like this https://ablab.amanotes.net/experiments/show/cee4c6bd-ebcd-4046-8e63-f5b262b14a47?[shorten_friendly_url] in [shorten_friendly_url] after decoded I still have full params I need @kapa.ai

AB Lab

AB Lab | Amanotes

wise-whiteOP•3d ago

AB Lab

AB Lab | Amanotes

wise-whiteOP•3d ago

@kapa.ai

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: Sorry @tingadev, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

wise-whiteOP•3d ago

AB Lab

AB Lab | Amanotes

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your desire for a more friendly URL structure while still preserving all the necessary parameters. While refine doesn't have a built-in feature specifically for creating custom shortened URLs as you described, it does offer flexibility in handling route parameters and query strings that you could potentially leverage to achieve a similar result. Here's an approach you could consider using refine's routing capabilities: 1. Create a custom parameter in your route definition:

{
  name: "experiments",
  show: "/experiments/show/:id/:shortCode"
}

{
  name: "experiments",
  show: "/experiments/show/:id/:shortCode"
}

2. In your component, you can use the useGo hook to navigate to this route with your custom shortCode parameter: useGo Documentation

import { useGo } from "@refinedev/core";

const go = useGo();

go({
  to: {
    resource: "experiments",
    action: "show",
    id: "cee4c6bd-ebcd-4046-8e63-f5b262b14a47",
    meta: {
      shortCode: "your-encoded-params"
    }
  }
});

import { useGo } from "@refinedev/core";

const go = useGo();

go({
  to: {
    resource: "experiments",
    action: "show",
    id: "cee4c6bd-ebcd-4046-8e63-f5b262b14a47",
    meta: {
      shortCode: "your-encoded-params"
    }
  }
});

3. In your show component, you can use the useParsed hook to access the shortCode parameter: useParsed Documentation

import { useParsed } from "@refinedev/core";

const {
  params: { shortCode }
} = useParsed();

// Decode shortCode and use the parameters as needed

import { useParsed } from "@refinedev/core";

const {
  params: { shortCode }
} = useParsed();

// Decode shortCode and use the parameters as needed

This approach would allow you to have a URL structure like:

<https://ablab.amanotes.net/experiments/show/cee4c6bd-ebcd-4046-8e63-f5b262b14a47/your-encoded-params>

<https://ablab.amanotes.net/experiments/show/cee4c6bd-ebcd-4046-8e63-f5b262b14a47/your-encoded-params>

However, please note that you would need to implement your own encoding and decoding logic for the shortCode parameter, as refine doesn't provide this functionality out of the box. You might want to use a library like lz-string (which refine uses internally) or implement your own encoding/decoding method. Remember that this is a custom solution and would require additional implementation on your part to fully achieve the desired result. Refine provides the routing flexibility, but the specific shortening and friendly URL creation would need to be handled in your application logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

I having a url like this. Do we have a way to short it but still works like params. Example encoded?

Did you find this page helpful?