Stack

• Svelte
• @tanstack/svelte-query

Setup

I have two different pages (HTML omitted):

1. posts/+page.svelte
2. post/[id]/[title]/+page.svelte

I use TanStack Query for storing data from the API. While I reference Svelte, I also use the documentation for React.js as most syntax seems to be compatible.

Here are the two major problems I am facing:

• In the posts page, I fetch all posts as an array. It fetches all data, but every time I navigate to this page, an API call is fired. I don’t want to make redundant API calls. How can I prevent this behavior?

• In the [id]/[title]/ page, I want to fetch post data from the already fetched data from the API, but the post is undefined. This problem is more serious. How can I log post from cached data?

Here is the simplified code for the two files:

src/routes/posts/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { createQuery } from "@tanstack/svelte-query";
  import type { Post } from "$lib/models/Post";
  import { fetchPaginatedPosts } from "$lib/posts/fetch-pagination";
  import { data } from './store';

  // Create the query outside of the render context
  const query = createQuery({
    queryKey: ["posts"],
    queryFn: fetchPaginatedPosts,
    initialData: null,
    refetchInterval: 360000, // Using the intervalMs from the store if needed
  });

  // Subscribe to the data store and update it with the query result
  onMount(() => {
    data.set($query);
  });

  let posts: Post[] = [];

  $: $data = $data || $query.data;

  $: {
    if ($data && !$data.isLoading && !$data.isError && $data.data) {
      posts = $data.data.posts || [];
      console.log("call without API", posts);
    }
  }
</script>

src/routes/post/[id]/[title]/+page.svelte

<script lang="ts">
  import { QueryCache } from "@tanstack/svelte-query";
  import { onMount } from "svelte";

  const queryCache = new QueryCache();

  const query = queryCache.find({ queryKey: ['posts'] });

  onMount(() => {
    console.log(query);
  });
</script>