How to use query result "outside" of React with RTK Query?

Viewed 23

I have an api definition with this, and other, endpoint:

...
saveCaptionsByLang: builder.mutation<
      Transcript,
      { wbId: string; ytUrl: string; lang: SupportedLang }
    >({
      query: ({ wbId, ytUrl, lang }) => ({
        url: wbId,
        params: {
          ytId: getYoutubeVideoId(ytUrl),
          toLang: lang,
        },
      })

    }),
...

And I want to be able to use this outside to create a function that can call this function based on values in an array.

For example:


export async function saveCaptionsInAllLangs(wbId: string, ytUrl: string) {
  return Promise.all(["en", "fr", "pt", "es"].map(saveCaption));

  async function saveCaption(lang: SupportedLang) {
    return await singleRequestFunction(..., lang).then(res =>...); //do something with the res
    // The awaited func here would be the equivalent of saveCaptionsByLang but without RTK Query
  }
}

And here is what I have now:


export async function saveCaptionsInAllLangs(wbId: string, ytUrl: string) {
  return Promise.all(["en", "fr", "pt", "es"].map(saveCaption));

  async function saveCaption(lang: SupportedLang) {
    const res =  store.dispatch(
      apiSvc.endpoints.saveCaptionsByLang.initiate({
        wbId,
        ytUrl,
        lang,
      })
    );

  }
}

The res variable of the final code snippet says it's the following type,

{
    data: FooType;
} | {
    error: FetchBaseQueryError | SerializedError;
}

but I can't access the .data on the variable because it says it doesn't exist.

0 Answers
Related