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

Posted 2023-03-08

【中文标题】如何从另一个 React / ReactNative 组件触发 GraphQL 查询

【英文标题】：How to trigger GraphQL Query from another React / ReactNative component

【发布时间】：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 的重新渲染？

谢谢

【参考方案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>
  );
;