How to I convert this API to be compatible with .js when trying to pass to backend data to frontend?

[Cameron_Browne]

I followed a guide helping me pass backend data to the frontend but realized my file is a .js not a .jsw like the video’s file was. I need help converting the API to allow my frontend data to retrieve my backend data.

import { getValues } from "@velo/google-sheets-integration-backend";
const SHEET_ID = "1VAmZP1_GIlXIO2okdH_nrHl6_zhAWNvmh6SgDdrzz6zc";

export async function fetchData(startRow, endRow) {
    const headerData = await getValues(SHEET_ID, "PublicView!A1:F1");
    const headers = headerData.data.values[0];
    const rowData = await getValues(SHEET_ID,`PublicView!A${startRow + 1}:F${endRow + 1}` );
    const rows = rowData.data.values;
    

    return {headers, rows};
}

I tried following the API on the wix developer site but am confused on how to format the permissions to pass this data to my frontend.

Any assistance or advice would be appreciated.

Thank you!

[Dan_Suhr]

.js files aren’t callable from the frontend. You will need to use the new .web.js or use the legacy .jsw

This may help

Backend File - backend-modules/sheets.web.js

// backend-modules/sheets.web.js
import { webMethod, Permissions } from 'wix-web-module';
import { getValues } from '@velo/google-sheets-integration-backend';

const SHEET_ID = '1VAmZP1_GIlXIO2okdH_nrHl6_zhAWNvmh6SgDdrzz6zc';

export const fetchData = webMethod(Permissions.Anyone, async (startRow, endRow) => {
  const headerResp = await getValues(SHEET_ID, 'PublicView!A1:F1');
  const headers = headerResp?.data?.values?.[0] ?? [];

  const from = (startRow ?? 0) + 2;  
  const to   = (endRow ?? startRow ?? 0) + 2;

  const range = `PublicView!A${from}:F${to}`;
  const rowsResp = await getValues(SHEET_ID, range);
  const rows = rowsResp?.data?.values ?? [];

  return { headers, rows };
});

Frontend

import { fetchData } from 'backend-modules/sheets.web';

$w.onReady(async () => {
  try {
    const { headers, rows } = await fetchData(0, 49); 
    console.log(headers, rows);
    // …bind to a repeater/table here…
  } catch (e) {
    console.error('fetchData failed:', e);
  }
});

[Cameron_Browne]

Thank you so much for this!

I was having issue figuring out where to pass the startRow, endRow data on the fetchData function. I was overthinking the solution based on other threads I was looking at.

Everything is working as intended now.

Thanks again!