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

Question

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

1. (Component A) 用于显示数据，该组件使用 query to graphql

2。 (Component B) 是用于触发组件 A 中具有某些过滤变量的查询的按钮。

当我点击按钮组件时，

变异
将过滤器保存到 graphql link 状态
触发组件A重新渲染新数据

问题是，组件 A 没有重新渲染..

这是我点击按钮时触发的代码

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

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

谢谢

Answer 1

嘿，你的问题基本上是 "what is wrong with my code?"，没有提供太多代码。我将尝试猜测这里出了什么问题：

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

改为做什么：

React 的设计初衷并不是为了拥有从一个组件到另一个组件的消息传递系统。相反，将变量状态提升到父组件或数据存储中，以便查询组件从 props 中获取变量（如果 props 与预期变量名称具有相同的名称，您甚至不必在 graphql 高阶组件函数选项。现在，当 props 和变量发生变化时，查询将自动重新获取。

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

Answer 2

我遇到了同样的问题，经过大量搜索后，none 的答案适合我。我不想提升状态，我想在同一个组件中维护查询逻辑，从另一个组件重新获取也是一个坏主意，因为传递给查询的变量不一样并且 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>
  );
};

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

How to trigger GraphQL Query from another React / ReactNative component

reactjs

graphql

react-native

react-apollo

apollo-client