#keepPreviousData Version 5

1 messages · Page 1 of 1 (latest)

pliant apex
#

I want to achive the same result as

 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

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

echo tapir
#

haven't seen that one yet, we use it in all our tests

#

you can also do:

placeholderData: (previous) => previous

because that's all keepPreviousData does

pliant apex
echo tapir
#

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?

pliant apex
echo tapir
#

in codesandbox or so

pliant apex
pliant apex
#

tried both firefox and chrome

echo tapir
#

seems bundler related

pliant apex
#

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...

echo tapir
pliant apex
#

@echo tapir 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
  })

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()

but it wants a query.

echo tapir
#

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

pliant apex
late spindle
#

any specific date yet? i really want to start learning it the right way

echo tapir
#

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 😅

late spindle
#

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... @echo tapir thank you🫡

#

@celest yoke

echo tapir
#

it's 6 weeks till end of year I think that's possible. But no promises 🙂

echo tapir
late spindle
late spindle
echo tapir
#

make a gist with your idea and I can take alook