Question

我对next.js开发有一个问题。 home.tsx是我的项目的主页。

home.tsx

<app-name></app-name>

withApollo.tsx

const GET_POSTS = graphql`
  query posts($accountname: String!, $page: Int, $pathBuilder: any, $postsStatus: String) {
    posts(accountname: $accountname, page: $page, postsStatus: $postsStatus)
      @rest(type: "Post", pathBuilder: $pathBuilder) {
      post_id
      author
      voteStatus(accountname: $accountname) @client
      created_at
    }
  }
`;

interface Props {
  author: string;
}

const Home: NextPage<Props> = ({ author }) => {
  const { data, fetchMore, loading } = useQuery(GET_POSTS, {
    variables: {
      accountname: author,
      page: 1,
      postsStatus: 'home',
      pathBuilder: () => `posts/?Page=1&Limit=5&domainId=1`,
    },
  });

  const loadMorePosts = () => {
    fetchMore({
      variables: {
        page: page + 1,
        pathBuilder: () => `posts/?Page=${page + 1}&Limit=5&domainId=1`,
      },
      updateQuery: (previousResult, { fetchMoreResult }) => {
        if (!fetchMoreResult) {
          return previousResult;
        }
        setPage(page + 1);
        return Object.assign({}, previousResult, {
          posts: [...previousResult.posts, ...fetchMoreResult.posts],
        });
      },
    });
  };

  return (
    <div></div>
  );
};

interface Context extends NextPageContext {
  apolloClient: ApolloClient<NormalizedCacheObject>;
}

Home.getInitialProps = async (ctx: Context) => {
  const cookies = nextCookie(ctx);
  const author = cookies[encodeURIComponent(KARMA_AUTHOR)];
  ctx.apolloClient.writeData({
    data: {
      accountName: author,
    },
  });

  return {
    layoutConfig: { layout: labels.DEFAULT },
    meta: {
      title: 'Home',
    },
    author,
  };
};

export default withAuthSync(withApollo({ ssr: true })(Home));

如果我初次访问主页或刷新主页，则由于cache.readQuery无法正常工作，所以无法在解析器中获取配置文件。以及它无限调用API。如果我移到另一个页面并再次返回主页，则cache.readQuery可以正常工作并正确获取帖子的个人资料和voiceStatus。有人遇到过这个问题吗？谁可以解决这个问题？

Apollo客户端缓存在next.js中不起作用

0 个答案: