optimistic-gold

createInfiniteQuery runs fetch, when initialData is defined

Hello, I have a main page in SvelteKit that has the following structure: +page.svelte

  import {createInfiniteQuery} from '@tanstack/svelte-query';
  export let data; // this has the initial data
  
  const getPublishedRecipes = async ({ pageParam = 0 }) => {
    const response = await fetch("http://localhost:5016/api/snippets/published?cursor=" + pageParam, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    });
    return await response.json();
  };

  const query = createInfiniteQuery({
    queryKey: ['data'],
    queryFn: getPublishedRecipes,
    initialData: data,
    //@ts-ignore
    getNextPageParam: (lastPage) => {
      if (lastPage.next) {
        const nextUrl = new URLSearchParams(new URL(lastPage.next).search)
        const nextCursor = nextUrl.get('page')
        if (nextCursor) {
          return +nextCursor
        }
      }
      return undefined
    },
  })
  const { error } = $query

  import {createInfiniteQuery} from '@tanstack/svelte-query';
  export let data; // this has the initial data
  
  const getPublishedRecipes = async ({ pageParam = 0 }) => {
    const response = await fetch("http://localhost:5016/api/snippets/published?cursor=" + pageParam, {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    });
    return await response.json();
  };

  const query = createInfiniteQuery({
    queryKey: ['data'],
    queryFn: getPublishedRecipes,
    initialData: data,
    //@ts-ignore
    getNextPageParam: (lastPage) => {
      if (lastPage.next) {
        const nextUrl = new URLSearchParams(new URL(lastPage.next).search)
        const nextCursor = nextUrl.get('page')
        if (nextCursor) {
          return +nextCursor
        }
      }
      return undefined
    },
  })
  const { error } = $query

And in the +page.server.js:

import { error } from '@sveltejs/kit';

const getPublishedRecipes = async ({pageParam = 0}) => {
  const response = await fetch('http://localhost:5016/api/snippets/published?cursor=' + pageParam, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    }
  });
  return await response.json();
};

/** @type {import('./$types').PageLoad} */
export async function load() {
  // Check if slug params exist
  return await getPublishedRecipes({pageParam: 0}).then(x => {
    return x;
  }).catch(() => {
    throw error(404, 'Not found');
  })
}

import { error } from '@sveltejs/kit';

const getPublishedRecipes = async ({pageParam = 0}) => {
  const response = await fetch('http://localhost:5016/api/snippets/published?cursor=' + pageParam, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    }
  });
  return await response.json();
};

/** @type {import('./$types').PageLoad} */
export async function load() {
  // Check if slug params exist
  return await getPublishedRecipes({pageParam: 0}).then(x => {
    return x;
  }).catch(() => {
    throw error(404, 'Not found');
  })
}

I have defined the initial data as the actual data that it's retrieved on the Page Load, that corresponds to the first set of articles or recipes. Given the initial data is set in the createInfiniteQuery, Is there any reason for this or workaround so that it doesn't try to fetch again the data that was fetched from the server?

3 Replies

optimistic-goldOP•3y ago

unwilling-turquoise•3y ago

I'm guessing because the query is mounted again on the client. Try setting a non zero staletime to your query like 1000ms or something

like-gold•3y ago

caching generally seemed to work properly for me when I pass the load function's custom fetch to any requests inside load functions instead of the global fetch, e.g something like.

import { error } from '@sveltejs/kit';

const getPublishedRecipes = async ({pageParam = 0, customFetch=fetch}) => {
  const response = await customFetch('http://localhost:5016/api/snippets/published?cursor=' + pageParam, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    }
  });
  return await response.json();
};

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
  // Check if slug params exist
  // pass the fetch from the load function and call that function instead
  return await getPublishedRecipes({pageParam: 0, customFetch: fetch}).then(x => {
    return x;
  }).catch(() => {
    throw error(404, 'Not found');
  })
}

import { error } from '@sveltejs/kit';

const getPublishedRecipes = async ({pageParam = 0, customFetch=fetch}) => {
  const response = await customFetch('http://localhost:5016/api/snippets/published?cursor=' + pageParam, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    }
  });
  return await response.json();
};

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
  // Check if slug params exist
  // pass the fetch from the load function and call that function instead
  return await getPublishedRecipes({pageParam: 0, customFetch: fetch}).then(x => {
    return x;
  }).catch(() => {
    throw error(404, 'Not found');
  })
}

otherwise you can set the staletime like @Aryan mentioned or refetchOnMount: false in the query options

Gaming

Programming

createInfiniteQuery runs fetch, when initialData is defined

Did you find this page helpful?