Share state between components

[aleksandrjet]

In the First component, I am making a request to server. How do I subscribe to the state of this request in Second component?

const request = async (): Promise<string> => {
  return await new Promise((resolve) => {
    setTimeout(() => resolve('RESULT'), 500)
  })
}

const REQUEST_KEY = 'REQUEST_KEY'

const FirstComponent: FC = () => {
  const queryState = useQuery(REQUEST_KEY, request)
  const { status, data } = queryState

  // returns 'loading, '
  // then returns 'success, RESULT'

  return <p>First: {status}, {data}</p>
}

const SecondComponent: FC = () => {
  const queryClient = useQueryClient()
  const queryState = queryClient.getQueryState(REQUEST_KEY)
  const { status, data } = queryState || {}

  // returns only 'idle, '

  return <p>Second: {status}, {data}</p>
}

const Page: FC = () => {
  return (
    <>
      <FirstComponent />
      <SecondComponent />
    </>
  )
}

Now the request status in Second component is always 'idle', although First component is already 'success'.

[TkDodo]

the second component should also call useQuery in order to create a subscription. If you do that, best shared via a custom hook, your second component will also update.

[aleksandrjet]

thank, it is working!

const request = async (): Promise<string> => {
  return await new Promise((resolve) => {
    setTimeout(() => resolve('RESULT'), 500)
  })
}

const useBaseRequest = (): UseQueryResult => {
  return useQuery('REQUEST_KEY', request)
}

const FirstComponent: FC = () => {
  const { status, data } = useBaseRequest()

  return <p>First: {status}, {data}</p>
}

const SecondComponent: FC = () => {
  const { status, data } = useBaseRequest()

  return <p>Second: {status}, {data}</p>
}

const RequestPage: FC = () => {
  return (
    <>
      <FirstComponent />
      <SecondComponent />
    </>
  )
}