How can I use ensureQueryData in a component? - Help please 😂

I am using

ensureQueryData

ensureQueryData

like this in a custom hook:

export const useInitialDataEnsureQueryData = () => {
  const [initialData, setInitialData] =
    useState<FetchInitialData.Return | null>(null)
  const queryClient = useQueryClient()

  useEffect(() => {
    async function ensureInitialData() {
      const initialData = await queryClient.ensureQueryData({
        queryKey: INITIAL_DATA_QUERY_KEY,
        queryFn: () => fetchInitialData(),
      })

      setInitialData(initialData)
    }

    ensureInitialData()
  }, [queryClient])


  return initialData
}

export const useInitialDataEnsureQueryData = () => {
  const [initialData, setInitialData] =
    useState<FetchInitialData.Return | null>(null)
  const queryClient = useQueryClient()

  useEffect(() => {
    async function ensureInitialData() {
      const initialData = await queryClient.ensureQueryData({
        queryKey: INITIAL_DATA_QUERY_KEY,
        queryFn: () => fetchInitialData(),
      })

      setInitialData(initialData)
    }

    ensureInitialData()
  }, [queryClient])


  return initialData
}

export const useInitialDataEnsureQueryData = () => {
  const [initialData, setInitialData] =
    useState<FetchInitialData.Return | null>(null)
  const queryClient = useQueryClient()

  useEffect(() => {
    async function ensureInitialData() {
      const initialData = await queryClient.ensureQueryData({
        queryKey: INITIAL_DATA_QUERY_KEY,
        queryFn: () => fetchInitialData(),
      })

      setInitialData(initialData)
    }

    ensureInitialData()
  }, [queryClient])


  return initialData
}

export const useInitialDataEnsureQueryData = () => {
  const [initialData, setInitialData] =
    useState<FetchInitialData.Return | null>(null)
  const queryClient = useQueryClient()

  useEffect(() => {
    async function ensureInitialData() {
      const initialData = await queryClient.ensureQueryData({
        queryKey: INITIAL_DATA_QUERY_KEY,
        queryFn: () => fetchInitialData(),
      })

      setInitialData(initialData)
    }

    ensureInitialData()
  }, [queryClient])


  return initialData
}

I want to use the data in a component, that's why I am using a hook, but even tough the data is already in cache, a new fetch is done.
Am I using it wrong?

How can I use ensureQueryData in a component? - Help please 😂

Similar Threads

Similar Threads

Similar Threads