React 应用程序上的 Apollo Client 缓存问题

Question

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

我已经设置了一个带有 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，但我遇到了同样的问题。

你能告诉我为什么会这样吗？我该如何克服这个问题？

非常感谢任何 help/advice

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
      }
    }
  }
`;

如您所见，我向 categoryId 传递了一个变量 $cid（服务器上的查询需要使用此名称）。我以为我可以为该变量使用我想要的名称，但事实证明，将变量用作 $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
      }
    }
  }
`;

解决了问题。

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

React 应用程序上的 Apollo Client 缓存问题

Issue with Apollo Client cache on a react app

caching

reactjs

graphql

react-apollo

apollo-client