Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't fetch data from local storage #445

Closed
alucardu opened this issue Aug 30, 2021 · 3 comments
Closed

Can't fetch data from local storage #445

alucardu opened this issue Aug 30, 2021 · 3 comments

Comments

@alucardu
Copy link

I'm trying to grab some data on my logged in user with apollo3-cache-persist.

// index.tsx

  const cache = new InMemoryCache();

  await persistCache({
    cache,
    storage: window.localStorage,
  });

  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache,
  });
// cache.tsx

export const currentUserVar: ReactiveVar<ICurrentUser> = makeVar<ICurrentUser>({
  id: 1,
  email: '',
  loggedIn: false,
});

export const cache: InMemoryCache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        User: {
          read() {
            return currentUserVar();
          },
        },
      },
    },
  },
});
// resolvers.ts

const ReturnCurrentUser = gql`
  query CurrentUser {
    user {
      email
    }
  }
`;
// movieOverview.tsx

  const {loading, error, data} = useQuery(resolvers.queries.ReturnCurrentUser, {fetchPolicy: 'cache-only'});
  console.log(loading, error, data);
// login.tsx

      currentUserVar({
        email: data.loginUser.currentUser.email,
        id: data.loginUser.currentUser.id,
        loggedIn: true,
      });
      window.localStorage.setItem('token', data.loginUser.token);

image

In the cache.tsx I have a reactive variable that stores the user data. The typePolicy should return the currentUserVar() value. But I keep getting a undefined. I'm probably mixing up several things to get this working.

@wodCZ
Copy link
Collaborator

wodCZ commented Aug 31, 2021

apollo3-cache-perist doesn't support reactive variables (see discussion in #361).

My guess is that the typePolicy is overriding the cached value with the reactive variable. You might find few approaches on persisting reactive variables in the linked issue.


PS: I've noticed you don't have the localstorage wrapped in wrapper (see readme):

import { persistCache, LocalStorageWrapper } from 'apollo3-cache-persist';

const cache = new InMemoryCache({...});

await persistCache({
  cache,
  storage: new LocalStorageWrapper(window.localStorage),
});

But that isn't the root of your issue.

@jspizziri
Copy link
Contributor

@wodCZ @alucardu , this can be closed yeah?

@wodCZ
Copy link
Collaborator

wodCZ commented Sep 23, 2021

I think so, @alucardu let me know if this needs to be reopened.

@wodCZ wodCZ closed this as completed Sep 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants