Hi @quasi sundial. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#internalMutation
slim shaleBOT
I'm sorry, but you cannot directly call an internalMutation from the frontend. As per the Convex documentation, an internalMutation is a mutation that is only accessible from other Convex functions but not from the client. This function will be allowed to read and write from your Convex database, but it will not be accessible from the client. This is to ensure the security and integrity of your data.
If you want to update some data of your user from the frontend, you should create a public mutation or action that calls the internalMutation. This public function can be called from the frontend, and it can then call the internalMutation to perform the update.
Here is an example of how you can define a public action that calls an internal mutation:
import { action } from "./_generated/server";
import { internal } from "./_generated/api";
import { v } from "convex/values";
export const upgrade = action({
args: {
planId: v.id("plans"),
},
handler: async (ctx, args) => {
// Call out to payment provider (e.g. Stripe) to charge customer
const response = await fetch("<https://...">);
if (response.ok) {
// Mark the plan as "professional" in the Convex DB
await ctx.runMutation(internal.plans.markPlanAsProfessional, {
planId: args.planId,
});
}
},
});
In this example, a user should not be able to directly call internal.plans.markPlanAsProfessional without going through the upgrade action — if they did, then they would get a free upgrade.
For more information, you can refer to the Convex documentation on internal functions (https://docs.convex.dev/functions/internal-functions#calling-internal-functions).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
quasi sundial
@slim shale and then how to call action in my frontend?
slim shaleBOT
Let me check the knowledge base for you. One moment! :books:
To call an action from your frontend in a React application, you can use the useAction hook provided by Convex along with the generated api object. Here's an example:
import { useAction } from "convex/react";
import { api } from "../convex/_generated/api";
export function MyApp() {
const performMyAction = useAction(api.myFunctions.doSomething);
const handleClick = () => {
performMyAction({ a: 1 });
};
// pass `handleClick` to a button
// ...
}
In this example, api.myFunctions.doSomething is the action you want to call. The useAction hook returns a function (performMyAction in this case) that you can call to execute the action. You can pass arguments to the action by providing an object to this function.
Please note that in most cases, calling an action directly from a client is considered an anti-pattern. Instead, it's recommended to have the client call a mutation which captures the user intent by writing into the database and then schedules an action.
For more information, you can refer to the Convex documentation on calling actions from clients (https://docs.convex.dev/functions/actions#calling-actions-from-clients).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
slim shaleBOT
Let me check the knowledge base for you. One moment! :books:
To pass data to the updateInstitution action, you can call it as a function with an object containing the arguments. In your case, you would call updateInstitution inside the form submission handler and pass the form data as arguments.
Here's an example of how you can do this:
<form
className="flex flex-wrap gap-x-10 gap-y-6"
onSubmit={async (event) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const name = formData.get('name');
// Pass other form data as needed
await updateInstitution({ name });
}}
>
<div className="w-full">
<label className="block text-sm font-medium text-gray-700">
Nom
</label>
<input
type="text"
name="name"
className="mt-1 block w-full p-2 border border-gray-300 rounded-md"
placeholder="Entrez le nom de votre établissement"
/>
<button type="submit">Submit</button>
</div>
</form>
In this example, I added a name attribute to the input field and an onSubmit handler to the form. The onSubmit handler prevents the default form submission, gets the form data, and calls updateInstitution with the form data.
Please replace 'name' with the actual argument name expected by your updateInstitution action.