T
TanStack•9mo ago
flat-fuchsia

Calling API and updating search params before loading a route

Hi, I have a case where BEFORE loading a route I'd really like to make some API call to check something and then update the searchParams based on the result. Something like: click -> see loading -> API call in the background -> searchparams update -> route is loaded What's the best way to achieve that? I tried beforeLoad for context update, but in middleware I only have access to the search params and not to context
3 Replies
sensitive-blue
sensitive-blue•9mo ago
beforeLoad is the answer. throw a redirect to update search params
flat-fuchsia
flat-fuchsiaOP•9mo ago
That's what I try: 
 beforeLoad: async ({ context: { queryClient }, search }) => {
    const data = await queryClient.ensureQueryData(
      getInitialMeeting(String(search.customer_id))
    );
    console.log({ data });
    throw redirect({
      from: '/choose-term',
      to: '/choose-term',
      search: (prev) => ({
        ...prev,
        user_id: data.user_id,
      }),
      replace: true,
    });
  },
 beforeLoad: async ({ context: { queryClient }, search }) => {
    const data = await queryClient.ensureQueryData(
      getInitialMeeting(String(search.customer_id))
    );
    console.log({ data });
    throw redirect({
      from: '/choose-term',
      to: '/choose-term',
      search: (prev) => ({
        ...prev,
        user_id: data.user_id,
      }),
      replace: true,
    });
  },
and unfortunately I get into infinite loop - see gazillion of console.logs with data. What am I doing wrong? OK, I just need to check whether user_id is already set at the beginning of the beforeLoad 😅 
if (search.acoustician_id) return;
if (search.acoustician_id) return;
sensitive-blue
sensitive-blue•9mo ago
yep

Did you find this page helpful?