无法在服务器呈现的nextjs apollo应用程序的组件中获取更新的缓存

迪安克

我有一个使用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>
  );
};
...

带有的第二个日志resultcheckLoggedIn文件的输出,类似于此处的输出

// 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ASP.Net应用程序在IIS服务器中呈现的方式有所不同

来自分类Dev

桌面应用程序应如何连续轮询服务器以获取更新?

来自分类Dev

在应用程序目录(缓存)中获取唯一的图像文件路径,其中包含存储在SDWEBIMAGE服务器中的图像的唯一URL

来自分类Dev

谁负责通过缓存在flux应用程序中从服务器获取数据?

来自分类Dev

divshot的服务器端代理未在Ember应用程序中呈现JSON API

来自分类Dev

“ /”应用程序中的服务器错误无法将char值转换为money

来自分类Dev

无法从远程服务器列表中获取应用程序池。循环无效

来自分类Dev

Erlang / Yaws:无法使用.conf文件在应用程序中启动Web服务器

来自分类Dev

无法读取NextJS服务器中未定义的属性'indexOf'

来自分类Dev

如何将NextJS应用程序部署到Linux服务器(CentOS 7)-VPS

来自分类Dev

在线Adobe Flash应用程序中的文本是否在服务器端呈现?

来自分类Dev

无法在Rails中区分应用程序服务器和Web服务器

来自分类Dev

在PHP应用程序中显示服务器端呈现的reactJS组件

来自分类Dev

桌面应用程序应如何连续轮询服务器以获取更新?

来自分类Dev

应用程序服务器无法启动

来自分类Dev

在应用程序目录(缓存)中获取唯一的图像文件路径,其中包含存储在SDWEBIMAGE服务器中的图像的唯一URL

来自分类Dev

无法从android应用中的服务器获取json数据

来自分类Dev

无法使用Tomcat或GlassFish服务器从Java Jersey应用程序获取JSON响应

来自分类Dev

使用数据库连接将代码部署到Azure Web时,Flask应用程序无法呈现,但是在本地服务器上运行良好

来自分类Dev

应用程序无法连接X服务器以启动

来自分类Dev

闪亮的服务器:应用程序无法启动

来自分类Dev

AngularJS应用程序无法从服务器获取列表(Java Spring)

来自分类Dev

无法联系服务器,应用程序无法打开

来自分类Dev

C# windows 应用程序的缓存服务器

来自分类Dev

无法从 Java 服务器应用程序获得响应

来自分类Dev

SAP 无法启动应用程序服务器

来自分类Dev

无法从服务器 URL 打开 Web 应用程序

来自分类Dev

应用程序无法连接到简单的服务器

来自分类Dev

Angular 7 - 从服务器到应用程序获取更新的最佳方式

Related 相关文章

  1. 1

    ASP.Net应用程序在IIS服务器中呈现的方式有所不同

  2. 2

    桌面应用程序应如何连续轮询服务器以获取更新?

  3. 3

    在应用程序目录(缓存)中获取唯一的图像文件路径,其中包含存储在SDWEBIMAGE服务器中的图像的唯一URL

  4. 4

    谁负责通过缓存在flux应用程序中从服务器获取数据?

  5. 5

    divshot的服务器端代理未在Ember应用程序中呈现JSON API

  6. 6

    “ /”应用程序中的服务器错误无法将char值转换为money

  7. 7

    无法从远程服务器列表中获取应用程序池。循环无效

  8. 8

    Erlang / Yaws:无法使用.conf文件在应用程序中启动Web服务器

  9. 9

    无法读取NextJS服务器中未定义的属性'indexOf'

  10. 10

    如何将NextJS应用程序部署到Linux服务器(CentOS 7)-VPS

  11. 11

    在线Adobe Flash应用程序中的文本是否在服务器端呈现?

  12. 12

    无法在Rails中区分应用程序服务器和Web服务器

  13. 13

    在PHP应用程序中显示服务器端呈现的reactJS组件

  14. 14

    桌面应用程序应如何连续轮询服务器以获取更新?

  15. 15

    应用程序服务器无法启动

  16. 16

    在应用程序目录(缓存)中获取唯一的图像文件路径,其中包含存储在SDWEBIMAGE服务器中的图像的唯一URL

  17. 17

    无法从android应用中的服务器获取json数据

  18. 18

    无法使用Tomcat或GlassFish服务器从Java Jersey应用程序获取JSON响应

  19. 19

    使用数据库连接将代码部署到Azure Web时,Flask应用程序无法呈现,但是在本地服务器上运行良好

  20. 20

    应用程序无法连接X服务器以启动

  21. 21

    闪亮的服务器:应用程序无法启动

  22. 22

    AngularJS应用程序无法从服务器获取列表(Java Spring)

  23. 23

    无法联系服务器,应用程序无法打开

  24. 24

    C# windows 应用程序的缓存服务器

  25. 25

    无法从 Java 服务器应用程序获得响应

  26. 26

    SAP 无法启动应用程序服务器

  27. 27

    无法从服务器 URL 打开 Web 应用程序

  28. 28

    应用程序无法连接到简单的服务器

  29. 29

    Angular 7 - 从服务器到应用程序获取更新的最佳方式

热门标签

归档