T
TanStack•6mo ago
absent-sapphire

How to use QueryClient within Actions

It's my first time using Solid Query in a Solid app and have questions about what the proper usage of it is within action functions that come from Solid. Given the following: 
type SignInForm = {
  readonly email: string;
  readonly password: string;
};

const authenticate = action(async (data: FormData) => {
  const queryClient = useQueryClient();
  const response = await authClient.signIn.email(convertToRecord<SignInForm>(data));

  if (response.error) throw new Error(response.error.message);

  const orgResponse = await authClient.organization.list();

  if (orgResponse.error) {
    throw new Error(orgResponse.error.message);
  }

  const userOrganizations = orgResponse.data;

  if (userOrganizations.length === 1) {
    await authClient.organization.setActive({ organizationId: userOrganizations[0]!.id });
    queryClient.invalidateQueries({ queryKey: ["authState"] });
    throw redirect("/inventory");
  }

  throw redirect("/organizations");
});
type SignInForm = {
  readonly email: string;
  readonly password: string;
};

const authenticate = action(async (data: FormData) => {
  const queryClient = useQueryClient();
  const response = await authClient.signIn.email(convertToRecord<SignInForm>(data));

  if (response.error) throw new Error(response.error.message);

  const orgResponse = await authClient.organization.list();

  if (orgResponse.error) {
    throw new Error(orgResponse.error.message);
  }

  const userOrganizations = orgResponse.data;

  if (userOrganizations.length === 1) {
    await authClient.organization.setActive({ organizationId: userOrganizations[0]!.id });
    queryClient.invalidateQueries({ queryKey: ["authState"] });
    throw redirect("/inventory");
  }

  throw redirect("/organizations");
});
I'm currently invoking useQueryClient inside of my action function which I believe is incorrect. What's the recommended approach to invalidating query cache keys within an action so that we can have all subscribers update their data due to the mutation that occurred against the cached key? Is this where I should be considering the of use of the useMutation API from TanStack instead of the native action from SolidJS?
1 Reply
multiple-amethyst
multiple-amethyst•6mo ago
Yeah I think you either use solid query or actions. I don't think you need both

Did you find this page helpful?