页面上的查询一旦导航回页

Question

在我的NextJS页面中，我有以下挂钩（使用 GraphQl-Codegen 生成），可获取GraphQl查询。

const { data, error, loading, fetchMore, refetch, variables } = useGetShortlistQuery({
  notifyOnNetworkStatusChange: true, // updates loading value
  defaultOptions: {
    variables: {
      offset: undefined,
      filterBy: undefined,
      sortBy: SortBy.RecentlyAdded,
      sortDirection: SortDirection.Desc,
    },
  },
});

这是 usegetShortListQuery 由 graphql-Codegen 生成的挂钩

export function useGetShortlistQuery(
  baseOptions?: Apollo.QueryHookOptions<GetShortlistQuery, GetShortlistQueryVariables>,
) {
  const options = { ...defaultOptions, ...baseOptions };
  return Apollo.useQuery<GetShortlistQuery, GetShortlistQueryVariables>(GetShortlistDocument, options);
}

我的组件包裹在HOC中，以启用Apollo客户端

export default withApollo({ ssr: true })(Index);

withapollo hoc hoc hoc hoc使用@apollo/client 和缓存 apollo客户端的属性如下。

cache: new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        getShortlist: {
          keyArgs: [],
          merge(existing: PaginatedProperties | undefined, incoming: PaginatedProperties): PaginatedProperties {
            return {
              ...incoming,
              properties: [...(existing?.properties || []), ...(incoming?.properties || [])],
            };
          },
        },
      },
    },
  },
}),

我遇到的问题是，在此页面上，我在变量上更新 usegetShortListQuery 使用 refetch ，它依次更新>数据。

但是，如果我导航到另一个页面，请使用此组件返回此页面。它似乎并没有重新启用GraphQl查询，因此返回了先前的数据。

Answer 1

如果您使用 getstaticProps （或 getServersideProps ），则使用预渲染页面，这是已知的行为。这是由于Next.js的优化。

诀窍是要在要查看刷新的组件上拥有键。您有多种方法。在组件上具有不同的键告诉React应该重新呈现组件，因此会再次触发钩子。

实际示例：

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const data = getData() //something that fetches your data here

  return {
    props: {
      // some other data you want to return...
      // some unique value that will be on each page
      key: data.key
    },
  }
}

const MyPage: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (props) => {
  <div key={props.key} />
}