Question

我正在寻找将 useQuery 与从另一个请求中获取的变量一起使用的正确方法。我有一个功能可以获取登录用户的餐车。一旦食品卡车被定义，我想调用我的查询。

import React, {useEffect, useState} from 'react'
import {useQuery, gql } from "@apollo/client";
import { getAxiosAPI } from '../../lib/api';

const gqlReservationsByFoodtruck = gql`
  query Reservations ($foodtruck: ID!) {
    reservations (  where: { foodtruck: $foodtruck }) {
    schedule {
      id
    }
  } 
}
`

const Query = ({foodtruck}) => {
    const { loading, error, data } = useQuery (gqlReservationsByFoodtruck, 
        { variables:  {foodtruck:foodtruck && foodtruck.id} }
    );
    console.log(data, 'data')
  };


const parseVaiables = () => {

    const [foodtruck, setFoodtruck] = useState(null)
    
    //Get Foodtruck from User ID
    useEffect(() => {
        const getFoodtrucks = async () => {
            const response = await getAxiosAPI(`/foodtrucks?user.lastName=Borsti`);
            setFoodtruck(response.data[0])
        }       
    getFoodtrucks()
    
    }, [Query({foodtruck})])

  return (    
   <>                     
     
    </>
  )
}


export default parseVaiables

如您所见，我在 useEffect 的输入中调用了我的函数 Query。这是我没有遇到无限循环或反应队列错误的唯一地方。

另外，像这样，它正在工作，但我的查询函数仍然使用空变量 foodtruck 调用，所以我得到未定义的数据和 graphql 错误：""message":"非空类型的变量 "$foodtruck" “ID！”不能为空。”

我也试试这个：

[foodtruck && Query(foodtruck)]

但在这里我收到另一条错误消息：错误：应该有一个队列。这很可能是 React 中的一个错误。请提出问题。

我该怎么做才能使它正确？

非常感谢！

从获取数据中正确使用带有变量的 useQuery

0 个答案: