How to use convex useMutation function inside Inngest functions

I am trying to run a mutation inside inngest function But its not working. I am getting this error

 ⨯ TypeError: Cannot read properties of null (reading 'useContext')

 ⨯ TypeError: Cannot read properties of null (reading 'useContext')

This is how I am using it

import { useMutation } from "convex/react";
import { inngest } from "./client";
import { api } from "../../convex/_generated/api";

const updateInteractiveVideo = useMutation(api.videos.updateInteractiveVideo);

export const generateTranscripts = inngest.createFunction(
  { id: "generate transcripts" },
  { event: "upload/generate.transcript" },
  async ({ event, step }) => {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_BACKEND_CUSTOM_LLM_BASE_URL}/generate-transcript?video_playback_id=${event.data.playbackID}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({}),
      }
    );
    const transcriptData = await response.json();

    updateInteractiveVideo({
      id: event.data.id,
      transcripts: { [event.data.videoID]: transcriptData },
      // visuals_by_visual_id: {
      //   [event.data.videoID]: {
      //     transcript_details: transcriptData,
      //     video_id: event.data.videoID,
      //     visual_details: modules?.[index]?.chapters?.[0]?.details || "",
      //     visual_end: endTimestamp.current,
      //     visual_playback_id: playbackID,
      //     visual_start: "00:00:00.000",
      //   },
      // },
      max_timestamps: event.data.max_timestamps,
    });
    return { event, body: transcriptData };
  }
);

import { useMutation } from "convex/react";
import { inngest } from "./client";
import { api } from "../../convex/_generated/api";

const updateInteractiveVideo = useMutation(api.videos.updateInteractiveVideo);

export const generateTranscripts = inngest.createFunction(
  { id: "generate transcripts" },
  { event: "upload/generate.transcript" },
  async ({ event, step }) => {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_BACKEND_CUSTOM_LLM_BASE_URL}/generate-transcript?video_playback_id=${event.data.playbackID}`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({}),
      }
    );
    const transcriptData = await response.json();

    updateInteractiveVideo({
      id: event.data.id,
      transcripts: { [event.data.videoID]: transcriptData },
      // visuals_by_visual_id: {
      //   [event.data.videoID]: {
      //     transcript_details: transcriptData,
      //     video_id: event.data.videoID,
      //     visual_details: modules?.[index]?.chapters?.[0]?.details || "",
      //     visual_end: endTimestamp.current,
      //     visual_playback_id: playbackID,
      //     visual_start: "00:00:00.000",
      //   },
      // },
      max_timestamps: event.data.max_timestamps,
    });
    return { event, body: transcriptData };
  }
);

2 Replies

ballingt•11mo ago

useMutation is a React hook, it can only be used in React component. If you need to get a mutation function outside if a React component try convexClient.mutation or try building an httpClient inline and using that.

beingkartikOP•11mo ago

Hey thanks it worked using ConvexHttpClient

How to use convex useMutation function inside Inngest functions

Did you find this page helpful?