quickest-silver
quickest-silver15mo 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
kapa.ai15mo 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
kapa.ai15mo 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
kapa.ai15mo ago
<@887020425320734720> kapa.ai is still learning and improving, please let us how it did by reacting below
optimistic-gold
optimistic-gold15mo ago
i will debug to issue. Are u using refine@3 or @4 ?
quickest-silver
quickest-silver15mo ago
refine-core ^3.18.0
optimistic-gold
optimistic-gold15mo 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
quickest-silver
quickest-silver15mo 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.
optimistic-gold
optimistic-gold15mo ago
do you have any other data hooks in post-edit page ? like useTable etc.
quickest-silver
quickest-silver14mo ago
I am using only useOne, I am not using any other data fetching hooks
optimistic-gold
optimistic-gold14mo 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.