fair-rose

keepPreviousData Version 5

I want to achive the same result as

 keepPreviousData: true

 keepPreviousData: true

did in version 4 but in version 5, when i read the documentation it say it should be:

import { useQuery, keepPreviousData } from '@tanstack/react-query'
placeholderData: keepPreviousData

import { useQuery, keepPreviousData } from '@tanstack/react-query'
placeholderData: keepPreviousData

But i get : Uncaught SyntaxError: ambiguous indirect export: keepPreviousData

21 Replies

extended-yellow•3y ago

haven't seen that one yet, we use it in all our tests you can also do:

placeholderData: (previous) => previous

placeholderData: (previous) => previous

because that's all keepPreviousData does

extended-yellow•3y ago

her's the implementation: https://github.com/TanStack/query/blob/8b7cc4313fdd6e128f9bcd6c3f159c16fbbefc15/packages/query-core/src/utils.ts#L327-L331

GitHub

query/packages/query-core/src/utils.ts at 8b7cc4313fdd6e128f9bcd6c3...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

fair-roseOP•3y ago

I tried that but it dosen achive the same result, with keepPreviousData: true the screen didnt bump up and down when i paginated between the pages

extended-yellow•3y ago

it should really behave the same with placeholderData. It was "just" an API change, not a behavioural one. Can you maybe reproduce this in isolation?

fair-roseOP•3y ago

Isolation?

extended-yellow•3y ago

in codesandbox or so

fair-roseOP•3y ago

i will try set it up very strange in codesandbox it works but not on my local machine, any toughts? tried both firefox and chrome

extended-yellow•3y ago

seems bundler related

fair-roseOP•3y ago

thats beyond my experience 😱:blobnomcookie: restarted the computer and the project and finally it works, thanks for ur help👌great community I think its a bit hard to learn react query in the beginning but i really see many benefits using it instead of useffect etc...

extended-yellow•3y ago

I'll try to bridge the learning gap with the new course I'm working on: https://query.gg

The Official React Query Course - 🔮 query.gg

Master React Query with mystifying ease. Built in collaboration with the React Query core team.

fair-roseOP•3y ago

@TkDodo 🔮 if i fetch data like this

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

const GITHUB_URL = import.meta.env.VITE_GITHUB_URL
const GITHUB_TOKEN = import.meta.env.VITE_GITHUB_TOKEN

export const useSearchUsers = (query) =>
  useQuery({
    queryKey: ['users', query],
    queryFn: () =>
      axios
        .get(`${GITHUB_URL}/search/users?=`, {
          params: {
            q: query
          },
          headers: {
            Authorization: `token ${GITHUB_TOKEN}`
          }
        })
        .then((res) => {
          return res.data
        }),
    enabled: !!query
  })

import { useQuery } from '@tanstack/react-query'
import axios from 'axios'

const GITHUB_URL = import.meta.env.VITE_GITHUB_URL
const GITHUB_TOKEN = import.meta.env.VITE_GITHUB_TOKEN

export const useSearchUsers = (query) =>
  useQuery({
    queryKey: ['users', query],
    queryFn: () =>
      axios
        .get(`${GITHUB_URL}/search/users?=`, {
          params: {
            q: query
          },
          headers: {
            Authorization: `token ${GITHUB_TOKEN}`
          }
        })
        .then((res) => {
          return res.data
        }),
    enabled: !!query
  })

how can i get acces to that data in another component without send a query as a parameter? I have a component that sends the query and then i have a component where i want to use that data but i dont know how to do it. i do like this in the component i wanna use the data

  const { data, isPending } = useSearchUsers()

  const { data, isPending } = useSearchUsers()

but it wants a query.

extended-yellow•3y ago

You need to have access to the query params because it's part of the cache key. It's needed to read from the cache. Essentially, that is client state, e.g. user input. If necessary, you'd need to make that available to all components where you want the query. How you do that is a client state management problem

fair-roseOP•3y ago

i solved it with useContext, 🤩

fascinating-indigo•3y ago

everywhere i check on how to properly learn react-query, im linked to this site but the course is still not available any specific date yet? i really want to start learning it the right way

extended-yellow•3y ago

We're working on it right now, but we also want to optimize for the best possible course rather than any specific date 🙂 It won't be 6 months, but it also won't be in the next 2 weeks 😅

fascinating-indigo•3y ago

ouch, i actually told the team we should expect it next month (that was what on the website). We really need to get hold of it and get fully ready to build the app after the holiday. Thanks i really would like to know if it provides courses for specific frameworks? we intend to use it with Next.js app server components also while i consume the docs and all of your blog post, i have an idea of how to structure the app with custom-hook (got that idea from you, lol), together with the query-key factory. is there like a github repo or codesandox where custom hooks were used so i can get more clarity on how to go about it... @TkDodo 🔮 thank you🫡 @M00LTi

extended-yellow•3y ago

it's 6 weeks till end of year I think that's possible. But no promises 🙂 The course has sections on SSR with nextJs app directory, server components integration, suspense and streaming 🙂

fascinating-indigo•3y ago

https://tenor.com/view/bbcan-damien-ketlo-im-completely-desperate-desperate-im-desperate-gif-13701223

Tenor

fascinating-indigo•3y ago

any help on this?

extended-yellow•3y ago

make a gist with your idea and I can take alook

fascinating-indigo•3y ago

thank you, i found a resource that explained it

Gaming

Programming

keepPreviousData Version 5

Did you find this page helpful?