apollo-cache-persistとapollo-link-stateが未定義キャッシュ状態で終了する

Question

実際にログインすると、currentUserクエリを実行してキャッシュ内のトークンを確認できますが、アプリケーションを更新するとトークンはnull 。

const currentUser = { 
    defaults: { 
    currentUser: { 
     __typename: 'CurrentUser', 
     token: null, 
    }, 
    }, 
    resolvers: { 
    Mutation: { 
     updateCurrentUser: (_, { token }, { cache }) => { 
     cache.writeData({ 
      data: { 
      __typename: 'Mutation', 
      currentUser: { 
       __typename: 'CurrentUser', 
       token, 
      }, 
      }, 
     }); 

     return null; 
     }, 
    }, 
    }, 
}; 

export default currentUser; 

私のクライアントのセットアップコードは次のようになります。

import { AsyncStorage } from 'react-native'; 
import { 
    ApolloClient, 
    HttpLink, 
    InMemoryCache, 
    IntrospectionFragmentMatcher, 
} from 'apollo-client-preset'; 
import { Actions as RouterActions } from 'react-native-router-flux'; 
import { persistCache } from 'apollo-cache-persist'; 
import { propEq } from 'ramda'; 
import { setContext } from 'apollo-link-context'; 
import { withClientState } from 'apollo-link-state'; 

import fragmentTypes from './data/fragmentTypes'; 
import config from './config'; 
import { onCatch } from './lib/catchLink'; 
import { defaults, resolvers } from './resolvers'; 
import { CurrentUserQuery } from './graphql'; 

const cache = new InMemoryCache({ 
    fragmentMatcher: new IntrospectionFragmentMatcher({ 
    introspectionQueryResultData: fragmentTypes, 
    }), 
}); 

persistCache({ 
    cache, 
    storage: AsyncStorage, 
    trigger: 'write', 
}); 

const httpLink = new HttpLink({ 
    uri: `${config.apiUrl}/graphql`, 
}); 

const stateLink = withClientState({ cache, resolvers, defaults }); 

const contextLink = setContext((_, { headers }) => { 
    const { currentUser: { token } } = cache.readQuery(CurrentUserQuery()); 
    return { 
    headers: { 
     ...headers, 
     authorization: token && `Bearer ${token}`, 
    }, 
    }; 
}); 

const catchLink = onCatch(({ networkError = {} }) => { 
    if (propEq('statusCode', 401, networkError)) { 
    // remove cached token on 401 from the server 
    RouterActions.unauthenticated({ isSigningOut: true }); 
    } 
}); 

const link = stateLink 
    .concat(contextLink) 
    .concat(catchLink) 
    .concat(httpLink); 

export default new ApolloClient({ 
    link, 
    cache, 
}); 

Answer 1

はおそらくリンクに参加するアポロリンクパッケージを使用してみてください。

import {ApolloLink} from 'apollo-link'; 
//.... 
//.... 
//.... 
const link = ApolloLink.from([stateLink,contextLink, catchLink, httpLink]); 

PS：あなたはキャッシュを再水和https://hptechblogs.com/central-state-management-in-apollo-using-apollo-link-state/

Answer 2

を、それをチェックアウトしたい場合、私はアポロ・リンクステートについての記事を書かれている非同期操作であり、それはあなたのクエリがキャッシュの前に実行されている可能性があり再水和しました。

persistCacheは、キャッシュが復元されると解決する約束を返します。