SolidJS•2w ago

I'm struggle with createResource

import { createResource, createEffect } from 'solid-js';

function YourAssignments(props: { me?: typeof users.$inferSelect }) {
  // Fetch data using createResource
  const [myBoard, { refetch }] = createResource<ResponseBoardsData>(async () => {
    try {
      const res = await fetch('/api/board/as-assigner');
      if (!res.ok) {
        throw new Error('Failed to fetch data');
      }
      const data = await res.json();
      console.log('Fetched data:', data);
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
      return { data: [] }; // Return an object with an empty array in case of error
    }
  });

  // Log the data when it changes
  createEffect(() => {
    console.log('myBoard:', myBoard()?.data); // It's return array
  });

  return (
    <>
      {myBoard.loading ? (
        <p>Loading...</p>
      ) : myBoard.error ? (
        <p class="notification is-danger">Error: {myBoard.error.message}</p>
      ) : myBoard() && myBoard().data && myBoard().data.length > 0 ? (
        myBoard().data.map((board) => <Board board={board} />) // not a function 
      ) : (
        <p class="notification is-info">You have no boards.</p>
      )}
    </>
  );
}

import { createResource, createEffect } from 'solid-js';

function YourAssignments(props: { me?: typeof users.$inferSelect }) {
  // Fetch data using createResource
  const [myBoard, { refetch }] = createResource<ResponseBoardsData>(async () => {
    try {
      const res = await fetch('/api/board/as-assigner');
      if (!res.ok) {
        throw new Error('Failed to fetch data');
      }
      const data = await res.json();
      console.log('Fetched data:', data);
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
      return { data: [] }; // Return an object with an empty array in case of error
    }
  });

  // Log the data when it changes
  createEffect(() => {
    console.log('myBoard:', myBoard()?.data); // It's return array
  });

  return (
    <>
      {myBoard.loading ? (
        <p>Loading...</p>
      ) : myBoard.error ? (
        <p class="notification is-danger">Error: {myBoard.error.message}</p>
      ) : myBoard() && myBoard().data && myBoard().data.length > 0 ? (
        myBoard().data.map((board) => <Board board={board} />) // not a function 
      ) : (
        <p class="notification is-info">You have no boards.</p>
      )}
    </>
  );
}

I'm noob guys, I thought solidjs could be that easy sorry...

5 Replies

peerreynders•2w ago

Not tested, just a sketch:

  const boardData = () => {
    const data = myBoard()?.data;
    if (!data || data.length < 1) return undefined;
    return data;
  };
  return (
    <ErrorBoundary
      fallback={(error, _reset) => (
        <p class="notification is-danger">Error: {error.message}</p>
      )}
    >
      <Suspense fallback={<p>Loading...</p>}>
        <Show
          when={boardData()}
          fallback={<p class="notification is-info">You have no boards.</p>}
        >
          {(data) => (
            <For each={data()}>{(board) => <Board board={board} />}</For>
          )}
        </Show>
      </Suspense>
    </ErrorBoundary>
  );

  const boardData = () => {
    const data = myBoard()?.data;
    if (!data || data.length < 1) return undefined;
    return data;
  };
  return (
    <ErrorBoundary
      fallback={(error, _reset) => (
        <p class="notification is-danger">Error: {error.message}</p>
      )}
    >
      <Suspense fallback={<p>Loading...</p>}>
        <Show
          when={boardData()}
          fallback={<p class="notification is-info">You have no boards.</p>}
        >
          {(data) => (
            <For each={data()}>{(board) => <Board board={board} />}</For>
          )}
        </Show>
      </Suspense>
    </ErrorBoundary>
  );

- Show - For - Suspense - ErrorBoundary - Derived signals Just because it uses JSX doesn't mean it's a React clone. The ErrorBoundary can't do its job if you swallow the error in the fetcher.

<Show> - SolidDocs