afraid-scarlet•17mo ago

Missing query params on reload while using useOne

Hey, I am using useOne from "@pankod/refine-core" to fetch data, So the problem is I am losing query params on reload. Is there any way that can prevent this from happening??? Eg: route "/post/edit/1/onePiece?captain=LUFFY&hunter=Zoro" becomes "/post/edit/1/onePiece on reload" I am using refine with nextjs, thanks in advance🙂

10 Replies

kapa.ai•17mo ago

Hi @Gopi_Krishna. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•17mo ago

---------------------- To persist query parameters with useOne while using refine with Next.js, you can handle query parameters during server-side rendering (SSR). You can use the parseTableParams function from @refinedev/nextjs-router to parse the query string and pass the parsed parameters to your data provider. Here's an example of how to handle query parameters during SSR:

// highligt-next-line  
import { parseTableParams } from "@refinedev/nextjs-router";  
import dataProvider from "@refinedev/simple-rest";  
  
const API_URL = "https://api.fake-rest.refine.dev";  
  
export const getServerSideProps = ({ params, resolvedUrl }) => {  
 const { resource } = params;  
  
 // highligt-next-line  
 const tableParams = parseTableParams(resolvedUrl?.split("?")[1] ?? "");  
  
 try {  
 const data = await dataProvider(API_URL).getList({  
 resource: resource as string,  
 ...tableParams, // this includes `filters`, `sorters` and `pagination`  
 });  
  
 return {  
 props: {  
 initialData: data,  
 },  
 };  
 } catch (error) {  
 return {  
 props: {},  
 };  
 }  
};  
export default function MyListPage({ initialData }) {  
 return <>{/* ... */}</>;  
}

// highligt-next-line  
import { parseTableParams } from "@refinedev/nextjs-router";  
import dataProvider from "@refinedev/simple-rest";  
  
const API_URL = "https://api.fake-rest.refine.dev";  
  
export const getServerSideProps = ({ params, resolvedUrl }) => {  
 const { resource } = params;  
  
 // highligt-next-line  
 const tableParams = parseTableParams(resolvedUrl?.split("?")[1] ?? "");  
  
 try {  
 const data = await dataProvider(API_URL).getList({  
 resource: resource as string,  
 ...tableParams, // this includes `filters`, `sorters` and `pagination`  
 });  
  
 return {  
 props: {  
 initialData: data,  
 },  
 };  
 } catch (error) {  
 return {  
 props: {},  
 };  
 }  
};  
export default function MyListPage({ initialData }) {  
 return <>{/* ... */}</>;  
}

This will ensure that the query parameters are persisted during SSR, and your route will maintain the query parameters on reload. For more information, refer to the refine documentation on handling query parameters with Next.js (https://refine.dev/docs/packages/documentation/routers/nextjs#how-to-persist-syncwithlocation-in-ssr). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Next.js | refine

refine provides router bindings and utilities for Next.js. This package will provide easy integration between refine and Next.js for both existing projects and new projects without giving up the benefits of Next.js.

kapa.ai•17mo ago

<@887020425320734720> kapa.ai is still learning and improving, please let us how it did by reacting below

conscious-sapphire•17mo ago

i will debug to issue. Are u using refine@3 or @4 ?

afraid-scarlet•17mo ago

refine-core ^3.18.0

conscious-sapphire•17mo ago

@Gopi_Krishna Hi again, useOne does not have syncWithLocation feature. what are you trying to do ? can you give me more detail please also, useOne don't have filter feature out-of-thebox unless you use meta and implement yourself i don't think it's releated to useOne

afraid-scarlet•17mo ago

Okay, @alicanerdurmaz Hi, this is my useOne call const { data, isLoading } = useOne({ dataProviderName: "strapi", resource: "resourceName", id: ${router?.query?.id}, metaData: { populate: [ "fields", ], }, }); As you can see, I am using strapi data provider, the route contains an id and I am passing it to useOne this is the dataProvider in _app.tsx dataProvider ={{ default: dataProvider(API_URL), strapi: DataProvider(https://mystrapiurl.com/api), }} Scenario: In the post-edit page, when a particular action happens I am redirecting to a third-party url(eg: aws cognito) and that third party will redirect to one of my application's public pages with some query parameters attached to it. From the info in that redirected URL, I am adding a few query params to the posts edit page and redirecting from the public page URL to the edit page here, I am able to see the query params for a sec, but after that, the query params are being removed. This is happening when reloading the edit page as well.

conscious-sapphire•17mo ago

do you have any other data hooks in post-edit page ? like useTable etc.

afraid-scarlet•17mo ago

I am using only useOne, I am not using any other data fetching hooks

conscious-sapphire•16mo ago

i couldn't reproduce the issue. im still investigating. useOne don't have syncWithLocaiton feature can you share me your redirectURL from aws congnito please ? you can hide host name if you want.