How do I keep derived data in sync

Hi All!
Like most here I'm pretty new to react query and I don't know I'm complicating things too much. So I'm trying to use react query as a state manager but I'm having an issue trying to keep derived data in sync. My setup is like this, I have multiple api hooks, each with useQuery and useMutations, I then have another hook to consolidate/combine the hooks and create some derived data. I have a component with a button that will run one or more of the mutations from the combined hooks. I want to use the cached data as the derived data so that I don't have to use the useEffects and useState and what not but I don't know how to go about it. I hope this makes sense. Thank you for your time

 const useApi1 = () => {
  const queryClient = useQueryClient()

  return {
    get: useQuery({
      queryKey: ['api1'],
      queryFn: async () => await axiosPromise1.get(),
    }),
    put: useMutation({
      mutationFn: axiosPromise1.put,
      onSuccess: async () =>
        await queryClient.invalidateQueries({ queryKey: ['api1'] }),
    }),
    getState: () => queryClient.getQueryState(['api1']),
  }
}

const useCombinedApis = () => {
  const api1 = useApi1()
  const api2 = useApi2() // similar to api1

  const derivedCombined = combinesValues(api1.get.data, api2.get.data) // the data I want to keep in sync

  return { api1, api2, derivedCombined }
}

export const MyReactComp = () => {
  const { derivedCombined } = useCombinedApis()

  const mainFunction = async (data) => {
    await api1.put.mutateAsync(data) // this func takes 300ms
    const updatedDataFromApi1 = api1.getState() // this const is up to date

    await functionThatNeedsTheDerivedData(derivedCombined) // this will fail because derived data is not in sync
  }

  return (
    <>
      <button onClick={() => mainFunction('my data')}>click me</button>
      some stuff here
    </>
  )
}

 const useApi1 = () => {
  const queryClient = useQueryClient()

  return {
    get: useQuery({
      queryKey: ['api1'],
      queryFn: async () => await axiosPromise1.get(),
    }),
    put: useMutation({
      mutationFn: axiosPromise1.put,
      onSuccess: async () =>
        await queryClient.invalidateQueries({ queryKey: ['api1'] }),
    }),
    getState: () => queryClient.getQueryState(['api1']),
  }
}

const useCombinedApis = () => {
  const api1 = useApi1()
  const api2 = useApi2() // similar to api1

  const derivedCombined = combinesValues(api1.get.data, api2.get.data) // the data I want to keep in sync

  return { api1, api2, derivedCombined }
}

export const MyReactComp = () => {
  const { derivedCombined } = useCombinedApis()

  const mainFunction = async (data) => {
    await api1.put.mutateAsync(data) // this func takes 300ms
    const updatedDataFromApi1 = api1.getState() // this const is up to date

    await functionThatNeedsTheDerivedData(derivedCombined) // this will fail because derived data is not in sync
  }

  return (
    <>
      <button onClick={() => mainFunction('my data')}>click me</button>
      some stuff here
    </>
  )
}

 const useApi1 = () => {
  const queryClient = useQueryClient()

  return {
    get: useQuery({
      queryKey: ['api1'],
      queryFn: async () => await axiosPromise1.get(),
    }),
    put: useMutation({
      mutationFn: axiosPromise1.put,
      onSuccess: async () =>
        await queryClient.invalidateQueries({ queryKey: ['api1'] }),
    }),
    getState: () => queryClient.getQueryState(['api1']),
  }
}

const useCombinedApis = () => {
  const api1 = useApi1()
  const api2 = useApi2() // similar to api1

  const derivedCombined = combinesValues(api1.get.data, api2.get.data) // the data I want to keep in sync

  return { api1, api2, derivedCombined }
}

export const MyReactComp = () => {
  const { derivedCombined } = useCombinedApis()

  const mainFunction = async (data) => {
    await api1.put.mutateAsync(data) // this func takes 300ms
    const updatedDataFromApi1 = api1.getState() // this const is up to date

    await functionThatNeedsTheDerivedData(derivedCombined) // this will fail because derived data is not in sync
  }

  return (
    <>
      <button onClick={() => mainFunction('my data')}>click me</button>
      some stuff here
    </>
  )
}

 const useApi1 = () => {
  const queryClient = useQueryClient()

  return {
    get: useQuery({
      queryKey: ['api1'],
      queryFn: async () => await axiosPromise1.get(),
    }),
    put: useMutation({
      mutationFn: axiosPromise1.put,
      onSuccess: async () =>
        await queryClient.invalidateQueries({ queryKey: ['api1'] }),
    }),
    getState: () => queryClient.getQueryState(['api1']),
  }
}

const useCombinedApis = () => {
  const api1 = useApi1()
  const api2 = useApi2() // similar to api1

  const derivedCombined = combinesValues(api1.get.data, api2.get.data) // the data I want to keep in sync

  return { api1, api2, derivedCombined }
}

export const MyReactComp = () => {
  const { derivedCombined } = useCombinedApis()

  const mainFunction = async (data) => {
    await api1.put.mutateAsync(data) // this func takes 300ms
    const updatedDataFromApi1 = api1.getState() // this const is up to date

    await functionThatNeedsTheDerivedData(derivedCombined) // this will fail because derived data is not in sync
  }

  return (
    <>
      <button onClick={() => mainFunction('my data')}>click me</button>
      some stuff here
    </>
  )
}

How do I keep derived data in sync

Similar Threads

Similar Threads

Similar Threads