Question

我有一些问题。我在React Native中有2个组件。

1。（组件A）用于显示数据，此组件使用查询到graphql

2。（组件B）是用于触发组件A中具有一些过滤变量的查询的按钮。

单击按钮组件时，

它变异
将过滤器保存到graphql链接状态
触发组件A重新呈现新数据。

问题是，组件A没有退回..

以下是单击按钮时触发的代码

this.props.mutate({
  variables: {
    Category
  },
  refetchQueries: [{
    query: FETCH_SEARCH,
    variables: {
      productcategory: Category,
      search: '',
    },
  }]
});

如何实现重新渲染组件A？

由于

Answer 1

嘿，你的问题基本上是“我的代码出了什么问题？”没有提供太多代码。我会试着猜出这里有什么问题：

您的查询组件仍然连接到旧变量，使用新变量重新获取它不会更新查询组件。只有当您使用相同的变量重新获取时，它才会更新。

该怎么做：

React并非旨在将消息传递系统从一个组件迁移到另一个组件。而是将变量状态提升到父组件或数据存储中，以便查询组件从props获取变量（如果props与预期变量名称具有相同的名称，您甚至不必在{{{ 1}}更高阶的组件函数选项。现在，当props - 以及变量 - 发生变化时，查询将自动重新获取。

graphql

Answer 2

经过大量搜索后，我遇到了同样的问题，没有答案适合我。我不想提升状态，我想在同一组件内维护查询逻辑，从另一个组件重新获取也是一个坏主意，因为传递给查询的变量并不相同，并且Apollo会对其进行解释作为另一个查询，第一个组件不变。

所以我的解决方案是使用Apollo将“过滤变量”保存在本地状态。这段代码仅是此答案的示例，我没有对其进行测试，只是从我的项目中复制并仅保留必要的解释。

在某些地方，您需要初始化阿波罗缓存

const data = {
  keyword: "",
};

cache.writeData({ data });

return ApolloClient({
  cache,
});

在第一个组件中，您将从缓存中查询此“关键字”变量，并将其传递给您希望每次重新获取的实际查询

 const GET_KEYWORD = gql`
   {
     keyword @client
   }
 `;

const FirstComponent = () => {
  const {
    data: { keyword },
  } = useQuery(GET_KEYWORD);

  const {
    data: importantData
  } = useQuery(SOME_OTHER_QUERY_YOU_WANT_TO_REFETCH, {variables: { keyword }});

  return <div>{importantData}</div>
}

在第二个组件中，您只需要更新此“关键字”

const SecondComponent = () => {
  const client = useApolloClient();

  const handleChange = (keyword: string) => {
    client.writeData({ data: { keyword: keyword } });
  };

  return (
    <div>
      <input onChange={handleChange} />
    </div>
  );
};

如何从另一个React / ReactNative组件触发GraphQL查询

2 个答案: