Can't get state to persist upon page refresh :(

Original message was deleted

kapa.ai•5/20/24, 8:27 PM

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

kapa.ai•5/20/24, 8:27 PM

----------------------
Based on the information provided, it seems like you're trying to persist state in your Wasp application using

localStorage

localStorage

. However, it's important to note that Wasp's authentication uses sessions to keep track of the logged-in user, and the session is stored in

localStorage

localStorage

on the client and in the database on the server. When users log out, Wasp deletes the session from the database and from

localStorage

localStorage

source (https://wasp-lang.dev/docs/auth/overview#sessions).

This could potentially interfere with your current implementation if the user logs out or if the session expires, as it could clear the

localStorage

localStorage

, resulting in the loss of your saved state.

As for the issue of state not persisting upon page refresh, it's hard to determine the exact cause without more context. However, one common cause could be that the state is being initialized before the data has been retrieved from

localStorage

localStorage

.

In your usePersistStateusePersistState hook, you're using

useMemo

useMemo

to get the initial value from

localStorage

localStorage

. However,

useMemo

useMemo

will only recompute the memoized value when one of the dependencies has changed. In this case, the dependencies are

id

id

and

initialValue

initialValue

. If these values don't change when the page is refreshed, the memoized value won't be recomputed.

One potential solution could be to move the retrieval of the initial value from

localStorage

localStorage

into the

useState

useState

call, like so:

const [state, setState] = useState(() => {
  const localStorageValueStr = localStorage.getItem('state:' + id);
  if (localStorageValueStr) {
    return JSON.parse(localStorageValueStr);
  }
  return initialValue;
});

const [state, setState] = useState(() => {
  const localStorageValueStr = localStorage.getItem('state:' + id);
  if (localStorageValueStr) {
    return JSON.parse(localStorageValueStr);
  }
  return initialValue;
});

This way, the initial value will be retrieved from

localStorage

localStorage

every time the state is initialized, which should include when the page is refreshed.

kapa.ai•5/20/24, 8:27 PM

Please note that this is just a suggestion based on the provided information and might not solve your issue if there are other factors at play. If the problem persists, I would recommend asking for help on a platform like StackOverflow, where you can provide more context and potentially get help from people who have encountered similar issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•5/20/24, 8:27 PM

Sorry @Jacob Ferrari, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

Zuck•5/20/24, 8:28 PM

oh sorry here is my loadeditorstate. This works but its not triggered on refresh:
export const loadEditorState: LoadEditorState<LoadEditorStateArgs, string | null> = async (args, context) => {
if (!context.user) {
throw new HttpError(401, 'User not authenticated');
}
const { projectId } = args;
const userId = context.user.id;

// Try to find the ProjectEditorState for the given user and project
const state = await context.entities.ProjectEditorState.findFirst({
where: {
AND: [
{ userId: userId },
{ projectId: projectId },
],
},
});

console.log('Loaded state:', state); // Add this line to log the loaded state

// Return the state if found, otherwise return null
return state ? state.state : null;
};

MEE6•5/20/24, 8:28 PM

Wohooo @Jacob Ferrari, you just became a Waspeteer level 3!

Zuck•5/20/24, 8:56 PM

okay more detail these are logs i added:

loadSavedState called
ProjectDetailsPage.tsx:39 user: undefined
ProjectDetailsPage.tsx:40 hasLoadedStateRef.current: false
ProjectDetailsPage.tsx:43 User not available
ProjectDetailsPage.tsx:38 loadSavedState called
ProjectDetailsPage.tsx:39 user: undefined
ProjectDetailsPage.tsx:40 hasLoadedStateRef.current: false
ProjectDetailsPage.tsx:43 User not available

I dont know why user is not available and undefinied. But that only occurs if i refresh the page.

Zuck•5/20/24, 8:58 PM

nevermind solved!!

martinsos•5/21/24, 8:26 AM

@Jacob Ferrari good to hear!

Just a couple thoughts:

Use triple backtick to provide code here. Start with line containing three backticks, then in the lines below put code, then again end with line containing three backticks.
I didn't quite get what you mean by not persisting state upon page refresh. What did you expect to happen, and why? Where is state living -> in the client, in the db? What you have shown is server code, of a Query called loadEditorStateloadEditorState.

const [state, setState] = useState(() => { const localStorageValueStr = localStorage.getItem('state:' + id); if (localStorageValueStr) { return JSON.parse(localStorageValueStr); } return initialValue; });

Can't get state to persist upon page refresh :(

Similar Threads

Similar Threads

Similar Threads