使用 GraphQL 获取的 useEffect 无限循环

Question

我正在编写一个简单的 React hook，它从 GraphQL 端点获取一些数据，将结果存储在一个状态中，并在获取数据时返回 [fetched-data, true] 或 [null, false] 当没有数据时，您可以在像 const [data, returned] = useGraphql({ query, Variables }); 这样的组件中使用它。返回已加载？数据：'正在加载'。

我遇到的问题是，如果我声明参数对象的可选变量属性，则挂钩会导致无限的 useEffect 循环。如果我省略变量参数，一切都会正常。

export default function useGraphql({ query, variables, token }: QueryArgs) {
    const [data, setData] = useState(null)

    const fetchData = useCallback(async () => {
        const init: RequestInit = {
            method: "POST",
            headers: {
                [token && 'Authorization']: token && `bearer ${token}`,
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                query, variables
            })
        }

        try {
            const response: Response = await fetch('/graphql', init)

            const parsed = await response.json()

            setData(parsed.data)
        } catch (error) {
            console.log(error)

            setData(null)
        }
    }, [query, variables, token]) // if I remove variables from the array here, this doesn't cause a loop anymore

    useEffect(() => {
        let mounted = true

        if (mounted) {
            fetchData()
        }

        return () => {
            mounted = false

            setData(null)
        }
    }, [fetchData])

    if (data) {
        for (const prop in data) {
            return [data[prop], true]

            break;
        }
    }

    return [null, false]
} 

当然，我在组件中使用这样的钩子：

const [data, loaded] = useGraphql({ 
        query: `query ($email: String!) {
            singleUser(email: $email) {
                username
                email
            }
        }`,
        variables: {
            email: "user1@project" // if I put variables like this, the loop occurs. If I hardcode the variables in the query, there is no loop.
        }
    })

    return <span> {loaded ? data.email : 'loading'} </span>

我真的不明白为什么放置变量会导致无限的重新渲染。 variables 参数如何改变 fetchData 函数？

Answer 1

我现在想出了以下解决方案：

我不传递普通变量对象，而是使用以下代码检查它是否已更改并将结果作为字符串返回。

function updateObj(obj: object): string {
    let object: string = JSON.stringify(obj)

    if (object !== JSON.stringify(obj)) {
        object = JSON.stringify(obj)
    }

    return object
}

所以在我的 useGraphql 钩子中，我像这样使用它：

const updatedVariables = updateObj(variables) 

它正在完成它的工作。我尝试返回一个对象而不是字符串化对象，但解析结果（使用 JSON.parse()）仍然导致循环