Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

Logout on Apollo-Client

$
0
0

I'm developing an app using react-native with Expo that interacts with a GraphQL Backend using Apollo.

The authorization between Front and Back is done with JWT token on header and it's working fine. On backend there is a Middleware that checks if the token exists and is valid:

  • If the query is open, it just retrieve the info.
  • If the query is authorized and the user is authenticated it retrieves the info.
  • If the query is authorized but the user is not logged in (or using an invalid token) it throws an error.

BACKEND

export const isAuth: MiddlewareFn<MyContext> = ({ context }, next) => {    const { authorization } = context.req.headers;    if (!authorization) {        throw new Error("Not authenticated. ");    }[...]}@Query(() => User)@UseMiddleware(isAuth)async Me(    @Ctx() { payload }: MyContext,) {    return UserModel.findById(payload!.userId);}

The way I'm getting the queryes is through the following component:

FRONTEND

const Me: React.FC<any> = (props) => {    const {        data, loading, error,    } = useMeQuery();    if (loading) {        return (<Text>Loading ... {String(props.test)}</Text>);    }    if (error) {        return (<Text>{ error.message } {String(props.test)}</Text>);    }    return (<Text>Hello { String(data?.Me?.email) } </Text>    );};

Being useMeQuery(); a hook function generated by @graphql-codegen/cli.

export function useMeQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<MeQuery, MeQueryVariables>) {        return ApolloReactHooks.useQuery<MeQuery, MeQueryVariables>(MeDocument, baseOptions);}

Up to here it is working fine.

Now, I'm trying to implement the Logout functionallity on the frontend so the user can keep navigating as an anonimous user when logged out.

I just created a button that calls a function that clears the stored tokens (it is working), so the next calls are not authenticated and throws an error. The problem I'm getting on is that apollo-client is using cache to rerender the query, so the now anonimous user is able to see the old-LogedIn user information.

In order to Logout, I tried several ways to clear cache, without succeed:

clearTokens(); // Clear tokens from asyncStorage. Working fine.// Tying to clear cache:client.clearStore(); // Not working, still getting the stored value on cache when refreshing the component.client.cache.reset(); // Not working, still getting the stored value on cache when refreshing the component.client.resetStore(); // Not working, it tries to call the query again, it throws an error (because it is not authenticated) and doesn't clear the cache.

Which is the best way in order to Logout when using apollo-client?

PD: If another user is logged in, I call the client.resetStore(); and the queryes all refetched, working properly. The problem is just to pass from loggedIn to anonimous.


Viewing all articles
Browse latest Browse all 6212

Trending Articles