#convex useQuery in child components

3 messages · Page 1 of 1 (latest)

quartz galleonBOT
#

Hi @pale lance. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your question is about using Convex's useQuery and usePreloadedQuery hooks in React components, which is a topic covered in the provided knowledge sources. Let me address your specific scenario.

The approach you're using to combine server-side data fetching with client-side updates is generally on the right track, but there are a few optimizations and best practices we can consider:

  1. Using preloadQuery and usePreloadedQuery:
    Your use of preloadQuery for server-side data fetching and usePreloadedQuery for client-side hydration is correct. This approach helps with initial page load performance and SEO, as described in the Next.js Server Rendering (https://docs.convex.dev/client/react/nextjs/server-rendering) documentation.

  2. Combining useQuery and usePreloadedQuery:
    While it's possible to use both hooks as you've done, it's generally not necessary. The usePreloadedQuery hook is designed to seamlessly transition from server-rendered data to live, reactive data. As mentioned in the documentation:

usePreloadedQuery` takes three arguments:
1. The query reference
2. Optionally the arguments object passed to the query
3. Optionally a **NextjsOptions** (<https://docs.convex.dev/api/modules/nextjs#nextjsoptions>) object

Next.js Server Rendering (https://docs.convex.dev/client/react/nextjs/server-rendering)

Instead of using both hooks, you could simplify your code to just use usePreloadedQuery:

const columnData = usePreloadedQuery(initialColumns);
const [columns, setColumns] = useState<ColumnData>(columnData || DEFAULT_COLUMNS);

This way, you'll get the initial server-rendered data, and it will automatically update when changes occur on the server.

#

  1. Avoiding unnecessary state:
    With Convex's reactive queries, you often don't need to manage state for query results manually. The usePreloadedQuery hook will automatically update when data changes, so you might not need the useState and useEffect combination you're currently using.

  2. Consistency:
    Be aware that when using multiple preloadQuery calls, you might encounter consistency issues as mentioned in the Consistency (https://docs.convex.dev/client/react/nextjs/server-rendering#consistency) section of the documentation. It's best to avoid using multiple preloadQuery calls on the same page if possible.

To answer your final question: Yes, the way you're getting the preloaded data and showing it is generally correct, but it can be simplified. The usePreloadedQuery hook is designed to handle both the initial server-rendered data and subsequent live updates, so you don't need to combine it with a separate useQuery call for the same data.

If you need to optimize further or handle more complex scenarios, you might want to look into custom hooks or the TanStack Query integration mentioned in the Discord discussions. However, for most use cases, simplifying to just use usePreloadedQuery should be sufficient.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: