'Avoid calling fetch eagerly during server side rendering — put your fetch calls inside onMount or a load function instead'

[sebCS222]

I keep getting this for the datatables I set up. The api.ts is:

import type { State } from '@vincjo/datatables/remote';

export const reload = async (state: State) => {
	const response = await fetch(`http://127.0.0.1:3000/items?${getParams(state)}`); // Added 'http://' to the URL
	const data = await response.json();
	state.setTotalRows(data.length);

	return applyWildcardFilter(data, state.filters || []);
};

const getParams = (state: State) => {
	const { sort, search } = state;
	let params = ''; // Set a high limit if all results are needed

	if (sort) {
		params += `&_sort=${sort.orderBy}&_order=${sort.direction}`;
	}
	return params;
};

const applyWildcardFilter = (data: any[], filters: any[]) => {
	if (!filters.length) return data;

	return data.filter(item =>
		filters.every(({ filterBy, value }) =>
			String(item[filterBy]).toLowerCase().includes(value.toLowerCase())
		)
	);
};

I'm calling it with import { reload } from "$lib/components/items_api"; and

const handler = new DataHandler<Row>([], {
      rowsPerPage: reload.length,
      totalRows: reload.length,
    });
    const rows = handler.getRows();
  
    handler.onChange((state: State) => reload(state));
    handler.invalidate();

I'm doing this idiomatically as outlined in the "Basic Usage" section of the documentation. Not sure why it is giving me this error.