Details of useParseQuery's isLive and isSyncing

[rshov]

Hi, thank you for this library. I know it is still in alpha and you're looking for feedback - I think the direction of this is right on track.

I'm starting a project with Next.js and Parse. The useParseQuery hook works much like react-query, which is exactly what I'm looking for. But I'd like some more information on isLive and isSyncing.

This is what I started with, which I expected would work:

  const {
    isLoading,
    results,
    error
  } = useParseQuery(parseQuery)

  if (isLoading) return <Spinner />
  if (error) return <ErrorMessage error={error} />
  if (!results || !results.length) return <ErrorMessage error='Project not found' />

  // Otherwise display the project info...
  return (
    // Project info
  )

The above resulted in a error message flashing for a second "Project not found" until the project object was loaded (this is just after creating a new project object in the parse db).

If I add checks for isLive and isSyncing, then the error message does not show.

  if (!isLive || isLoading || isSyncing) return <Spinner />

I would expect that checking isLoading would be enough. Do I need to also check isLive and isSyncing?

Thank you!
Raymond

[davimacedo]

Thanks for the feedback.

• isLoading indicates that the initial data is being loaded
• isLive indicates that the live query is connected and the client is receiving real time updates
• isSyncing indicates that latest data is being loaded (after live query is connected) to make sure the client has the latest data

In the case of Next.js, the initial load should be coming from the server and the component starts already loaded. I believe that's the reason why isLoaded is true for you in the beginning. You can see in the link below an example on how to send the initial load from the server to the client in next.js:
https://github.com/parse-community/parse-react/blob/master/examples/next-ts-todo/pages/index.tsx

[rshov]

When the initial data is being loaded, do I still need to check isSyncing? Seems like isLoading should cover the same case as isSyncing for the initial load. Thanks

[davimacedo]

In the case of next.js, if you want to make sure you have the latest updated data, you need to check isSyncing. Otherwise you don't need to check any flag and just show the data that came from the server side rendering.

[rshov]

Thanks!