我有一个使用apollo客户端状态的nextjs apollo服务器呈现的应用程序。我面临的问题是在应用程序加载时,即使正确更新了本地状态,在标头组件中调用的本地状态graphql查询也不会返回具有正确数据的最新状态,而是会返回初始状态。我无法弄清楚为什么会这样,是由于阿波罗客户端安装程序还是由于缓存initialState。
该应用程序是使用apollo客户端的nextjs服务器呈现的应用程序。我已经广泛尝试调整apollo客户端设置以弄清楚重置状态确切在哪里[我说是重置,因为在更新状态后记录状态给了我正确的结果]。
阿波罗配置是官方nextjs阿波罗示例的修改版
// lib/apollo.js
...
const appCache = new InMemoryCache().restore(initialState);
const getState = (query) => appCache.readQuery({ query });
const writeState = (state) => appCache.writeData({ data: state });
initCache(appCache);
return new ApolloClient({
ssrMode: typeof window === 'undefined',
link: ApolloLink.from([consoleLink, errorLink, authLink, fileUploadLink]),
cache: appCache,
resolvers: StateResolvers(getState, writeState),
typeDefs,
defaults: {},
connectToDevTools: true,
});
...
// apollo/StateResolvers.js
export const GET_LOGIN_STATUS_QUERY = gql`
query {
loginStatus @client {
isLoggedIn
}
}
`;
export default (getState, writeState) => {
return {
Mutation: {
updateLoginStatus(_, data) {
const { loginStatus } = getState(GET_LOGIN_STATUS_QUERY);
const newState = {
...loginStatus,
loginStatus: {
...loginStatus,
...data,
},
};
writeState(newState);
const updatedData = getState(terminal); // getting correct updated state here
console.log('log updateLoginStatus:', updatedData);
return { ...data, __typename: 'loginStatus' };
},
},
};
};
// initCache.js
export default (appCache) =>
appCache.writeData({
data: {
loginStatus: {
isLoggedIn: false,
__typename: 'loginStatus',
},
},
});
标头已导入_app.js nextjs文件中使用的布局组件中
// header/index.js
...
const q = gql`
query {
loginStatus @client {
isLoggedIn
}
}
`;
const Header = (props) => {
const { loading, data, error } = useQuery(q); // not getting the updated state here
console.log('header query data:', loading, data, error);
return (
<div>header</div>
);
};
...
带有的第二个日志result
是checkLoggedIn
文件的输出,类似于此处的输出
// server side terminal output
log updateLoginStatus: { loginStatus: { isLoggedIn: true, __typename: 'loginStatus' } }
result: { data: updateLoginStatus: { isLoggedIn: true, __typename: 'loginStatus' } } }
header query data: true undefined undefined {}
header query data: false { loginStatus: { isLoggedIn: false, __typename: 'loginStatus' } } undefined
header query data: false { loginStatus: { isLoggedIn: false, __typename: 'loginStatus' } } undefined
我的最终目标是isLoggedIn
在标头中获得正确设置的标志,以便在登录状态和注销状态之间正确切换。
请让我知道是否需要更多详细信息。任何帮助将不胜感激。
看起来您正在还原初始状态
您要还原服务器的呈现状态。
例如:
可以说你做了
const state = apolloClient.extract();
return `
<script>
window.__APOLLO_STATE__ = ${JSON.stringify(state)};
</script>
`;
您想还原此状态
不是初始状态
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句