Reve Posts - Answer Overflow

Reve

•Created by Reve on 7/9/2024 in #support

Implement 'load more' feature efficiently

I read the docs and searched this for like 3 hours but still can't find a good solution. Here is what my code currently looks like:

import { For, Show, createResource } from 'solid-js';
import Post from './Post';

function getPosts(startID: number) {
  console.log('Loading posts starting from ID:', startID);

  return fetch(`/api/post/get?startID=${startID}&limit=10`)
    // @ts-ignore
    .then((res): Promise<Post[] | undefined> => {
      if (res.ok) return res.json();
    })
    .catch(() => { });
}

// TODO: Load more posts somehow
export default function Posts() {
  const [startID, setStartID] = createSignal(-1);
  const [loadedPosts] = createResource(startID, getPosts);
  const currentPosts = loadedPosts();

  return (
    <div class='grid grid-cols-1 gap-12 mt-12'>
      <Show when={typeof currentPosts !== 'undefined' && currentPosts.length !== 0}>
        <For each={currentPosts!}>{Post}</For>
      </Show>
    </div>
  );
}

import { For, Show, createResource } from 'solid-js';
import Post from './Post';

function getPosts(startID: number) {
  console.log('Loading posts starting from ID:', startID);

  return fetch(`/api/post/get?startID=${startID}&limit=10`)
    // @ts-ignore
    .then((res): Promise<Post[] | undefined> => {
      if (res.ok) return res.json();
    })
    .catch(() => { });
}

// TODO: Load more posts somehow
export default function Posts() {
  const [startID, setStartID] = createSignal(-1);
  const [loadedPosts] = createResource(startID, getPosts);
  const currentPosts = loadedPosts();

  return (
    <div class='grid grid-cols-1 gap-12 mt-12'>
      <Show when={typeof currentPosts !== 'undefined' && currentPosts.length !== 0}>
        <For each={currentPosts!}>{Post}</For>
      </Show>
    </div>
  );
}

You don't need to care about the Post type and component they are just there to display a post My idea was to use an array to save the loaded posts and when it needs to load more I changed the id to be the last loaded post id

17 replies

Gaming

Programming