首页 > 解决方案 > 将 react-native 添加到 monorepo 后,React apollo hooks 失败

问题描述

我正在尝试使用 yarn 工作区创建一个带有 monorepo 的 React Web 应用程序和 React-native 应用程序。所以我创建了网络和控制器,它工作正常。我能够对我的 apollo-express 服务器进行 graphql 查询。但是,在添加 react-native 应用程序后,我看到了: 在此处输入图像描述

我 100% 没有违反任何 react hooks 规则,因为在添加 react-native 应用程序之前它工作正常。

有什么办法可以解决吗?

阿波罗控制器

import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

export const useHelloQuery = () => useQuery(
     gql`
         {
             hello
         }
     `
)

反应组件:

function Test() {
     const data = useHelloQuery();

     return (
          <Text>awesoe</Text>
     );
}

在添加 react-native 之前它是完全相同的

标签: javascriptreactjsreact-nativeapollomonorepo

解决方案


您需要更改调用方式,useQuery因为这不是使用钩子的正确方式。

而且您不必担心手动触发 api 调用,useQuery它将为您处理。

import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

function Test() {
     const response = useQuery(
     gql`
         {
             hello
         }
     `)

     return (
          <Text>awesoe</Text>
     );
}

推荐阅读