How to refresh loader with new data without refreshing the whole page - SSR React Hydrogen

19 Views Asked by At

Essentially, in React Hydrogen, each page gets a loader function, which is handled on the backend to do queries like for example

export async function loader({params, request, context}: LoaderFunctionArgs) {
  const {handle} = params;
  const {storefront} = context;
  const variants = storefront.query(VARIANTS_QUERY, {
    variables: {handle},
  });
  return defer({product, variants});
}

export default function Product() {
  const {product, variants} = useLoaderData<typeof loader>();
}

This is fine, UNTIL i want to for example have a filters component that just filters out different data. For this i'd need to add something to the url, for example ?filter=name or something like that and completely refresh the URL. I do not want to completely refresh the url i just want a way to pass the data I changed to the loader, in the same way that React query works, where i dont need to refresh the url to get the new data.

Is there anyway to just rerun the loader app and have it change the states without completely refresh the url? this is problematic because lets say a useer checks a checkbox. as well as having to get all parameters and re checking that box, the box will flash for a split second because the page has refreshed and it still hasnt gotten the checked state..

Thanks!

I've tried searching the docs to no avail...

0

There are 0 best solutions below