52 replies

How can I run a query only one time when the page loads?

I am trying to create a record of a session when the page loads so I can gather user metrics. Initially I thought that I could create a state variable

(true | false)

(true | false)

Then in a if statement I check if the state is false run my query then set the state to ture.

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

When I try this I get an error:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

When I run the query outside of the if block anytime the component remounts a new session record is created in my database. My goal is to create a session when the page loads, get the id of the new session added to my database and use that ID to update the session periodically as the user interacts with my application.

Can I please get some guidance on how to do this?

As some extra context when I try to use my query in a useEffect block It errors out saying that I cant run a hook inside a hook.

Solution

I am trying to create a record of a session when the page loads so I can gather user metrics. Initially I thought that I could create a state variable

(true | false)

(true | false)

Then in a if statement I check if the state is false run my query then set the state to ture.

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

When I try this I get an error:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Jump to solution

TTC

Theo's Typesafe Cult•3y ago•

52 replies

ideceddy

How can I run a query only one time when the page loads?

I am trying to create a record of a session when the page loads so I can gather user metrics. Initially I thought that I could create a state variable

(true | false)

(true | false)

Then in a if statement I check if the state is false run my query then set the state to ture.

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

When I try this I get an error:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Solution

I am trying to create a record of a session when the page loads so I can gather user metrics. Initially I thought that I could create a state variable

(true | false)

(true | false)

Then in a if statement I check if the state is false run my query then set the state to ture.

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

const [query_ran, set_query_ran] = useState(false); 
if (!query_ran) {
  const { data, isLoading } = api.session.add_session.useQuery();
  set_query_ran(true); 
}

When I try this I get an error:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

Jump to solution

How can I run a query only one time when the page loads?

How can I run a query only one time when the page loads?

Similar Threads

Similar Threads

Similar Threads