avvosmeyz
avvosmeyz
PostsComments
SSolidJS
Created by avvosmeyz on 2/28/2024 in #support
Reacting to a store change outside the context of a root or render function
I have a user store to manage user token etc. global-store.ts 
export const [userStore, setUserStore] = makePersisted(
  createStore<UserStoreState>({
    user: null,
    tokens: null,
    accessToken: '',
  }),
  { name: 'linkerly-user-store', storageOptions: { type: 'localStorage' } },
);
export const [userStore, setUserStore] = makePersisted(
  createStore<UserStoreState>({
    user: null,
    tokens: null,
    accessToken: '',
  }),
  { name: 'linkerly-user-store', storageOptions: { type: 'localStorage' } },
);
I'm also experimenting with the library called wretch. linkerly-api.ts 
const getAccessToken = () => {
  return userStore.accessToken;
};

export const linkerlyApi = wretch(API_URI)
  .headers({ 'Content-Type': 'application/json' })
  .auth(`Bearer ${getAccessToken() ?? 'no'}`)
const getAccessToken = () => {
  return userStore.accessToken;
};

export const linkerlyApi = wretch(API_URI)
  .headers({ 'Content-Type': 'application/json' })
  .auth(`Bearer ${getAccessToken() ?? 'no'}`)
After a successful login I am setting the user store. 
setUserStore(
        produce((draft) => {
          draft.user = loginResponse.user;
          draft.tokens = loginResponse.tokens;
          draft.accessToken = loginResponse.tokens.accessToken;
        }),
      );
setUserStore(
        produce((draft) => {
          draft.user = loginResponse.user;
          draft.tokens = loginResponse.tokens;
          draft.accessToken = loginResponse.tokens.accessToken;
        }),
      );
The question is if I don't wrap the 
userStore.accessToken
userStore.accessToken
in a createEffect it's not reactive and auth token doesn't get injected into the http client. If I wrap it I am getting 'computations created outside a createRoot or render will never be disposed'. Felt like I am doing something that's not supposed to do or recomennded and there should be a better way to do all of these. Any idea?
2 replies