T
TanStack•3mo ago
metropolitan-bronze

set route state from loader funtion

Hey is it possible to set router state from loader function in createFileRoute? something like that: 
import { projectEstimateQueryOptions } from '@services/estimates/estimates.query';
import { createFileRoute } from '@tanstack/react-router';
import { handleNotFoundError } from '@utils/handleNotFoundError';
import { ProjectEstimate } from '@views/Authorized/ProjectEstimate/ProjectEstimate';

export const Route = createFileRoute(
  '/_authorized/workspace/_layout/projects/$spreadsheetId/$projectName/$spreadsheetName/',
)({
  loader: async ({
    context: { queryClient },
    params: { spreadsheetId },
    location,
  }) => {
    try {
      const data = await queryClient.ensureQueryData(
        projectEstimateQueryOptions(+spreadsheetId, false),
      );

      location.state.estimate = {
        isTemplate: data?.data.is_template,
        isLibrary: data?.data.is_library,
      };
    } catch (error: unknown) {
      handleNotFoundError(error);
    }
  },
  component: ProjectEstimate,
});
import { projectEstimateQueryOptions } from '@services/estimates/estimates.query';
import { createFileRoute } from '@tanstack/react-router';
import { handleNotFoundError } from '@utils/handleNotFoundError';
import { ProjectEstimate } from '@views/Authorized/ProjectEstimate/ProjectEstimate';

export const Route = createFileRoute(
  '/_authorized/workspace/_layout/projects/$spreadsheetId/$projectName/$spreadsheetName/',
)({
  loader: async ({
    context: { queryClient },
    params: { spreadsheetId },
    location,
  }) => {
    try {
      const data = await queryClient.ensureQueryData(
        projectEstimateQueryOptions(+spreadsheetId, false),
      );

      location.state.estimate = {
        isTemplate: data?.data.is_template,
        isLibrary: data?.data.is_library,
      };
    } catch (error: unknown) {
      handleNotFoundError(error);
    }
  },
  component: ProjectEstimate,
});
1 Reply
metropolitan-bronze
metropolitan-bronzeOP•3mo ago
im tryingg to use "redirect" but it does not work 
import { projectEstimateQueryOptions } from '@services/estimates/estimates.query';
import { createFileRoute, redirect } from '@tanstack/react-router';
import { handleNotFoundError } from '@utils/handleNotFoundError';
import { ProjectEstimate } from '@views/Authorized/ProjectEstimate/ProjectEstimate';

export const Route = createFileRoute(
  '/_authorized/workspace/_layout/projects/$spreadsheetId/$projectName/$spreadsheetName/',
)({
  loader: async ({
    context: { queryClient },
    params: { spreadsheetId },
    location,
    navigate,
  }) => {
    try {
      const data = await queryClient.ensureQueryData(
        projectEstimateQueryOptions(+spreadsheetId, false),
      );

      const state = location.state;

      if (!state?.estimate) {
        redirect({
          state: {
            estimate: {
              isTemplate: data?.data.is_template,
              isLibrary: data?.data.is_library,
            },
          },
          throw: true,
        });
      }
    } catch (error: unknown) {
      handleNotFoundError(error);
    }
  },
  component: ProjectEstimate,
});
import { projectEstimateQueryOptions } from '@services/estimates/estimates.query';
import { createFileRoute, redirect } from '@tanstack/react-router';
import { handleNotFoundError } from '@utils/handleNotFoundError';
import { ProjectEstimate } from '@views/Authorized/ProjectEstimate/ProjectEstimate';

export const Route = createFileRoute(
  '/_authorized/workspace/_layout/projects/$spreadsheetId/$projectName/$spreadsheetName/',
)({
  loader: async ({
    context: { queryClient },
    params: { spreadsheetId },
    location,
    navigate,
  }) => {
    try {
      const data = await queryClient.ensureQueryData(
        projectEstimateQueryOptions(+spreadsheetId, false),
      );

      const state = location.state;

      if (!state?.estimate) {
        redirect({
          state: {
            estimate: {
              isTemplate: data?.data.is_template,
              isLibrary: data?.data.is_library,
            },
          },
          throw: true,
        });
      }
    } catch (error: unknown) {
      handleNotFoundError(error);
    }
  },
  component: ProjectEstimate,
});
but when i use navigate which is depprecated - it works loool i see this now 😄 redirect doesnt work because it is handled by try catch - i just moved it outside trycatch and now it works 😄

Did you find this page helpful?