反应应用程序上的 Apollo 客户端缓存问题

Question

在获取基于类别返回文章列表的端点时，我遇到了一个问题。

我已经设置了一个带有 apollo 客户端的 React 应用程序，该客户端包装了所有内容 (index.tsx)：

const client = new ApolloClient({
  uri: myurl,
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <ApolloProvider client={client}>
      <Router>
        <App />
      </Router>
    </ApolloProvider>
  </ThemeProvider>,

  document.getElementById("root")
);

然后我在菜单中有一个<Link to={news/${cat}} /> 列表，当我单击菜单时，它会正确导航到news/1234。

从页面中，我获得了我需要的类别，然后将其用作我的 graphql 查询的变量。

由于我有客户端包装整个应用程序，我使用ApolloConsumer 像这样传递客户端：

const CategoryArticlesList = ({ location, match }: RouteChildrenProps) => {
  return (
    <ApolloConsumer>
      {(client) => {
        return (
          <ListAllArticles location={location} match={match} client={client} />
        );
      }}
    </ApolloConsumer>
  );
};

然后，从<ListAllArticles> 组件，我得到了这段简化的代码：

const getNewsBycategory = gql`
  query($page: Int, $cid: String) {
    News(page: $page, categoryId: $cid) {
      results {
        category
        category_id
        title
        date
        body_preview
        is_published
        thumbnail_s
        id
      }
      extra {
        pagination {
          total_items
          limit
        }
      }
    }
  }
`;


const pageToFetch = "1"
const categoryId = match.params.categoryId || "1234";

  const variables = React.useMemo(
    () => ({
      page: pageToFetch,
      categoryId: categoryId,
    }),
    [categoryId, pageToFetch]
  );

  const { data, loading, error } = useQuery(getNewsBycategory, {
    variables: { ...variables },
  });

当我更改页面时，URL 中的类别发生了变化，使用新的和更新的 categoryID 变量执行查询（我检查了网络选项卡），但结果与以前相同。

我认为这是一个缓存问题，所以我尝试将"no-cache" 和"network-only" 更改为fetchPolicy，但我遇到了同样的问题。

您能否建议为什么会发生这种情况以及我该如何克服？

非常感谢您提供任何帮助/建议

Answer 1

最后，我设法找到了问题。

我是这样调用我的查询的：

export const query = gql`
  query($page: Int, $cid: String) {
    News(page: $page, categoryId: $cid) {
      results {
        category
        category_id
        title
        date
        body_preview
        is_published
        thumbnail_s
        id
      }
    }
  }
`;

如您所见，我将变量 $cid 传递给 categoryId（服务器上的查询需要此名称）。 我以为我可以为该变量取我想要的名称，但结果表明，将变量用作 $cid 而不是 $categoryId 并没有在查询中发送变量。

将我的查询更改为如下所示：

export const getNewsBycategory = gql`
  query($page: Int, $categoryId: String) {
    News(page: $page, categoryId: $categoryId) {
      results {
        category
        category_id
        title
        date
        body_preview
        is_published
        thumbnail_s
        id
      }
    }
  }
`;

解决了问题。

直到现在我才知道这个变量命名的事情，奇怪的是，从网络上我可以看到变量被发送出去，但只有调试服务器我才发现它并没有真正被发送出去结束