#How to query data without component reloading?

68 messages · Page 1 of 1 (latest)

empty coral
#

So im using react and nextjs.

# 
export default async function DemoPage() {
  const authUser = useUser().user

  const results = useQuery(api.logger.list, {
      user_id: authUser ? authUser.id : "skip"
  }) || []

    console.log(`loading ${results.length} logs`)

  return (
      <div className="container mx-auto py-10">
          <div className={"flex justify-center mb-10"}>
              <h1>Logs</h1>
          </div>
          <LogTable logs={results as any}  />
      </div>
  )
}
#

However the problem is, whenever a new log is made, the react component reloads which causes my loading.tsx file for next suspence to load the page. So if logs fire while a user is on the logging page, it refeshes every time which is a bad UE

#

is there a way I can steam the logs to load into the component without this refesh action?

#

im thinking maybe i need to switch to pagination?

#

i know its simple to add

muted oriole
#

useQuery hooks cause components to rerender, but not remount — so I don't think it's the useQuery causing this here. Could you share the code that includes the suspense boundary?

empty coral
#

in the root of my next app dir i have:

loading.tsx

import React, { FC } from "react";
import SpinnerLoader from "@/components/ui/Spinner";

interface ComponentProps {}

const Component: FC<ComponentProps> = ({}) => {
  return (
    <>
      <SpinnerLoader />
    </>
  );
};

export default Component;
muted oriole
#

from the first code sample it doesn't look like any suspense would be triggered even if the api.logger.list query where loading (which should only happen on initial load), since it would just be an empty list

empty coral
# muted oriole from the first code sample it doesn't look like any suspense would be triggered ...

well in my LoggerTable i do have some useState that updates the logs from the passed props:

const LoggerTable: FC<LoggerProps> = ({ logs }) => {
    const [currentPage, setCurrentPage] = useState(0);
    const [logPages, setLogPages] = useState<Logs[]>([]);

    useEffect(() => {
        // Split logs into pages of 10 logs each
        const pages = [];
        for (let i = 0; i < logs.length; i += 10) {
            pages.push(logs.slice(i, i + 10));
        }
        setLogPages(pages);
    }, [logs]);
}

Could this be it?

muted oriole
#

How is a new log created, is that what's causing this component to be remounted?

#

Nothing here would cause an unmount and then a remount

#

How is a new log created, is it a user action on this page?

empty coral
#

no logs are created in different pages in the app and there mutations

muted oriole
#

Is this the normal useQuery hook imported from convex/react, or are you using a special one that does suspense things?

empty coral
#

"convex/react";

muted oriole
#

Could you share more of your code? I don't see anything that would trigger suspense here. If it's helpful you could DM me the code or add me to a GitHub project, username thomasballinger

empty coral
#

its open source

#

hold on

muted oriole
#

The useQuery hook from Convex never triggers a suspense boundary, so I don't see anything in the code above that would cause it .

empty coral
#

okay so

muted oriole
#

Oh cool, looks like you just added pagination 📃

empty coral
#

yes

#

thought it would be a good feature in something like a logger which I dont want to have to load 5k logs each page load

#

would it be helpful if i record with obs my site and how it functions when i use the log table i made?

#

so you can see what i mean or is the code enough

muted oriole
#

I think I know what you mean here by the component reloading, you're saying somehow the query updating causes your page to suspend — but sure, that might be helpful to see

#

To clarify, does this happen if you have the logs view open in one tab and add a long in another browser tab?

empty coral
empty coral
muted oriole
#

There's probably something about Next.js App Router that I'm missing here because I don't see in this code why it would go to a loading state.

empty coral
#

okay im going to record it...im just realising i had nvidia drivers from 2023 still, obs wants me to update them d_shaha

muted oriole
#

If you want other code suggestions, I would do the repagination inline in the component (possibly memoized) instead of in a useEffect with setState — but I don't understand how this would cause a loading state, so you could try it but I'd be surprised if it helps

empty coral
#

oh

#

forgot to do mp4 mb

#

one sec

muted oriole
#

oh thanks, I'm on a plane so harder than usual to install ffmpeg/vlc to watch a mkv

empty coral
#

now you should be able to watch in discord i think

#

yeah i prefer mkv in obs

muted oriole
#

Those double-loads are odd

#

like when you first click Logs

#

What does the network tab look like when you do this same navigation?

empty coral
#

idk

empty coral
muted oriole
#

The initial double `logs?_requests are interesting but after that since there are no more network requests this must be Convex data changing, so that's helpful to confirim. I'll take another look

empty coral
#

ok

muted oriole
#

I thought it might be an auth reloading thing but it doesn't look like it

empty coral
#

@muted oriole i fixed it

#

...

#

look

muted oriole
#

nice!

empty coral
#

So all i did was move the query function into the component like you suggested. What i think happed was next as caching the query and then convex invalidated it so it caused the reload in react suspence.

# 
const { results, loadMore } = usePaginatedQuery(api.logger.list, {
        user_id: authUser ? authUser.id : "skip"
    }, {
        initialNumItems: 10,
    }) || []
#

i just moved this into the component itself and not passed in props

muted oriole
#

Interesting! Since both page.tsx and LogTable have "use client"; I wouldn't have thought this would matter, good to know!

#

thanks for sharing, glad it's worked out

empty coral
#

also question: Im a college student studying computer science. What kind of experience do I need to ever work somewhere like convex? I have software skills but im not sure whats enough to apply for jobs like these?

#

@muted oriole

muted oriole
#

Hm good question, thinking about it.

#

Re: experience, when we have bandwidth we have previously hired recent graduates, so internships at startups are helpful since that's usually the only practical experience more undergrads have time to get. Experience building web applications is a big bonus, but most of the work at Convex is backend (we're building backend infrastructure so that our customers don't have to!). We write our backend in Rust, but experience with C, Go, C++, Scala, Java, OCaml, or other statically typed compiled language will do here. Operating systems or other data structure-y courses are relevant here.

#

For

whats enough to apply for jobs like these?
I would go ahead and apply to jobs like these, especially internships, whether you think you're ready or not.

empty coral
#

very helpful! thanks for the information tom, good talking to you