#### Pick your app

The examples below will be updated with your app ID.

It is a common pattern to show users a long list of items that gets larger as they interact. Instant supports this pattern with the `useInfiniteQuery` hook.

The useInfiniteQuery hook is designed to work just like the useQuery hook. You make the same kind of queries and it returns the same kind of data. But now you get a canLoadNextPage variable, and a loadNextPage function to load more items.

## Example

This example demonstrates a typical social media feed where the newest posts are at the top.

```ts
import { init } from '@instantdb/react';
import { db } from "../db"
import { Post } from "../components/Post"

function HomePage() {
  const { data, canLoadNextPage, loadNextPage, isLoading, error } =
    db.useInfiniteQuery({
      posts: {
        $: {
          limit: 50, // Load 50 posts at a time
          order: {
            createdAt: 'desc',
          },
        },
      },
    });

if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Error: {error.message}</div>;
  }

return (
    <div>
      {data.posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
      {canLoadNextPage && (
        <button onClick={loadNextPage}>Load More</button>
      )}
    </div>
  );
}
```

Any new posts that get created will automatically appear at the top, and as the user scrolls, the `loadNextPage` can load older posts as needed.

## Reactivity

Just like `useQuery`, all data returned is fully reactive. Updating and deleting items will react immediately. New items added to the "start" of the query will show up automatically as well as items anywhere in the middle. Items that _would_ be ordered at the very end of the results will show up if the limit for that page has not yet been reached.

For example, with `{todos: {$: {limit: 20, order: createdAt: "asc"}}}` (showing oldest todos first)

If there are already 19 todos in the database, an additional todo getting created will show up in the result automatically, and the next todo after that will set "canLoadNextPage" to true, requiring the `loadNextPage` function to be called. When the new page is added, any newly created todos will show up at the end automatically until 40 total todos are shown.

Changing any part of the query will result in a full reset of all data, returning back to a state with only one page loaded.

## Vanilla JS

The `@instantdb/core` library also supports making infinite queries with the same syntax as `db.subscribeQuery()`.

Example:

```ts
const { unsubscribe, loadNextPage } = db.subscribeInfiniteQuery(
  {
    posts: {
      $: {
        limit: 20, // Load 20 posts at a time
        order: {
          createdAt: 'desc',
        },
      },
    },
  },
  (resp) => {
    console.log('Posts: ', resp.data.posts);
    console.log('Can Load More ?', resp.canLoadNextPage);
  },
);
```

If you are an LLM trying to learn how to develop with Instant, here are all of the links to the docs:

[Getting started w/ React](/content/docs/index.html)  
[Getting started w/ React Native](/content/docs/start-rn/index.html)  
[Getting started w/ Vanilla JS](/content/docs/start-vanilla/index.html)  
[Getting started w/ SolidJS](/content/docs/start-solidjs/index.html)  
[Getting started w/ Svelte](/content/docs/start-svelte/index.html)  
[Getting started w/ TanStack Start](/content/docs/start-tanstack/index.html)  
[Create Instant App](/content/docs/create-instant-app/index.html)  
[Recommended Workflow](/content/docs/workflow/index.html)  
[Using LLMs](/content/docs/using-llms/index.html)  
[Init](/content/docs/init/index.html)  
[Modeling data](/content/docs/modeling-data/index.html)  
[Writing data](/content/docs/instaml/index.html)  
[Reading data](/content/docs/instaql/index.html)  
[Infinite Queries](/content/docs/infinite-queries/index.html)  
[Instant on the backend](/content/docs/backend/index.html)  
[Patterns](/content/docs/patterns/index.html)  
[Auth](/content/docs/auth/index.html)  
[Magic codes](/content/docs/auth/magic-codes/index.html)  
[Guest Auth](/content/docs/auth/guest-auth/index.html)  
[Google OAuth](/content/docs/auth/google-oauth/index.html)  
[Sign In with Apple](/content/docs/auth/apple/index.html)  
[GitHub OAuth](/content/docs/auth/github-oauth/index.html)  
[LinkedIn OAuth](/content/docs/auth/linkedin-oauth/index.html)  
[Clerk](/content/docs/auth/clerk/index.html)  
[Firebase Auth](/content/docs/auth/firebase/index.html)  
[Permissions](/content/docs/permissions/index.html)  
[Rate Limits](/content/docs/rate-limits/index.html)  
[Managing users](/content/docs/users/index.html)  
[Presence, Cursors, and Activity](/content/docs/presence-and-topics/index.html)  
[Instant CLI](/content/docs/cli/index.html)  
[Devtool](/content/docs/devtool/index.html)  
[Platform API](/content/docs/platform-api/index.html)  
[Explorer Component](/content/docs/explorer-component/index.html)  
[Custom emails](/content/docs/emails/index.html)  
[App teams](/content/docs/teams/index.html)  
[Storage](/content/docs/storage/index.html)  
[Streams](/content/docs/streams/index.html)  
[Stripe Payments](/content/docs/stripe-payments/index.html)  
[Admin HTTP API](/content/docs/http-api/index.html)  
[Experimental) Next.js SSR](/content/docs/next-ssr/index.html)  
[Migrating from Supabase](/content/docs/migrate-from-supabase/index.html)