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

【问题标题】：How to trigger GraphQL Query from another React / ReactNative component如何从另一个 React / ReactNative 组件触发 GraphQL 查询
【发布时间】：2018-11-02 03:49:03
【问题描述】：

我有一些问题。我在 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 的重新渲染？

谢谢

【问题讨论】：

标签： reactjs react-native graphql react-apollo apollo-client

【解决方案1】：

嘿，您的问题基本上是“我的代码有什么问题？”无需提供太多代码。我会尝试猜测这里出了什么问题：

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

该怎么做：

React 的设计不是为了让一个组件到另一个组件的消息传递系统。而是将变量状态提升到父组件或数据存储中，以便查询组件从 props 获取变量（如果 props 与预期的变量名称相同，您甚至不必在 @987654321 中显式传递它们@ 高阶组件函数选项。现在查询将在道具 - 以及变量 - 发生变化时自动重新获取。

<QueryComponent
  search={this.state.search}
  productcategory={this.state.productcategory}
/>
<SelectorComponent
  onSearchChange={search => this.setState({ search })}
  onCategoryChange={productcategory => this.setState({ productcategory })}
/>

【讨论】：

您好，我已经找到解决方案，无需重新获取数据查询。只需要在数据查询上添加变量，从状态查询。谢谢
这不正是我上面写的吗？

【解决方案2】：

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

所以我的解决方案是用 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>
  );
};

【讨论】：