如何在React+Apollo中使用不同变量值重新调用GraphQL查询？

嘿，我来帮你搞定这个问题！在react-apollo里动态更新变量并重新执行查询，有两种非常实用的方式，我给你一步步讲清楚：

这是最符合React设计理念的做法——把查询变量放到组件的状态里，当状态更新时，Query组件会自动检测到variables属性的变化，然后重新执行查询。

下面是修改后的完整代码：

import React, { useState } from 'react'
import { gql } from 'apollo-boost'
import { Query } from 'react-apollo'

// 补全你的GraphQL查询（记得定义变量参数）
const CATEGORY_QUERY = gql`
  query GetCategories($limit: Int!, $cursor: String, $idcategory: Int!) {
    categories(limit: $limit, cursor: $cursor, idcategory: $idcategory) {
      id
      name
      # 其他需要的字段...
    }
  }
`

const Home = () => {
  // 初始化查询变量到组件状态
  const [queryVariables, setQueryVariables] = useState({
    limit: 20,
    cursor: "",
    idcategory: 0
  })

  const handleOnCategoryTouch = (id) => {
    // 更新state中的idcategory，保留其他变量原有值
    setQueryVariables(prevVars => ({
      ...prevVars,
      idcategory: id
    }))
  }

  return (
    <Query query={CATEGORY_QUERY} variables={queryVariables}>
      {({ loading, error, data }) => {
        if (loading) return <Text>Loading...</Text>;
        if (error) return <Text>Error :(</Text>;
        
        // 渲染分类列表，绑定点击事件触发变量更新
        return (
          <div>
            {data.categories?.map(category => (
              <div 
                key={category.id} 
                onClick={() => handleOnCategoryTouch(category.id)}
                style={{ padding: '10px', borderBottom: '1px solid #eee' }}
              >
                {category.name}
              </div>
            ))}
          </div>
        )
      }}
    </Query>
  )
}

export default Home

如果你不想用状态驱动，也可以直接通过ref获取Query组件的实例，然后调用它的refetch方法手动触发查询：

import React, { useRef } from 'react'
import { gql } from 'apollo-boost'
import { Query } from 'react-apollo'

const CATEGORY_QUERY = gql`Some query here`

const Home = () => {
  // 创建ref引用Query组件
  const categoryQueryRef = useRef(null)

  const handleOnCategoryTouch = (id) => {
    // 调用refetch传入新变量，触发查询
    categoryQueryRef.current?.refetch({
      limit: 20,
      cursor: "",
      idcategory: id
    })
  }

  return (
    <Query 
      ref={categoryQueryRef}
      query={CATEGORY_QUERY} 
      variables={{ limit: 20, cursor: "", idcategory: 0 }}
    >
      {({ loading, error, data }) => {
        if (loading) return <Text>Loading...</Text>;
        if (error) return <Text>Error :(</Text>;
        // 渲染你的业务内容
        return <div>Your content here</div>
      }}
    </Query>
  )
}

export default Home

小提示 #

• 优先选择方案一，因为它完全遵循React的单向数据流原则，代码更易维护，也不容易出现逻辑漏洞。
• 不管用哪种方式，更新变量时尽量保留原有参数（比如limit和cursor），除非你确实需要重置它们。

内容的提问来源于stack exchange，提问作者Mozak