使用apollo graphql＆＃x2b;反应天然

发布于 2025-01-30 09:18:35 字数 1758 浏览 3 评论 0原文

几天前，我对GraphQl + React本地堆栈有特定的问题。好的，所以我有反应本机应用程序，其中包括：

简单路由器 + tabsnavigator;
用于渲染数据的小型containerComponent和愚蠢的组件；对于后端工作，我正在使用apollo graphQl（在创建服务器并处理此问题之前）

：当我尝试使用使用useQuery获取数据时代码>，但是此问题仅在我的iPhone或iOS模拟器上实际。如果我运行应用程序并在Web浏览器上测试了其工作正确 - 我会看到GraphQl提取请求和数据/加载状态更改。

对于我以前做过的修复问题：

删除和更新依赖关系；
我尝试使用usequery更新状态的使用效果。我的流程包括data in usestate如果loader将为false（它在iPhone，iOS模拟器上不工作） ;
尝试运行子女组件内的使用usequery。假设我不了解有关本机的一些特定渲染细节。奇怪的事情，为什么应用程序在Web浏览器上启动并正常工作，但在iPhone，iOS模拟器上不工作。让我们看看一些代码。

赠送解析器以获取数据并在useQuery中获取数据

 来自'@apollo/client'的导入{gql};
导出const get_all_users = gql
  用户上的fragment用户field {
    ID
    用户名
    年龄
    帖子{
      内容
    }
  }
  询问 {
    getallusers {
      ...用户场
    }
  }

函数graphListContainer（）{
  const {data，lading} = usequery（get_all_users）;

  返回 （
    ＆lt;查看样式= {styles.renderblock}＆gt;
      {数据 ？ （（
        ＆lt; flatlist
          ContentContainerStyle = {listStyle.ContainerStyle}
          data = {data？.getAllusers}
          keyExtractor = {（item）=＆gt; item.id.tostring（）}
          RenderItem = {（{item，index}）=＆gt; （（
            ＆lt; listrenderedtodos item = {item} index = {index} /＆gt;
          ）
        /＆gt;
      ） ： 加载中 ？ （（
        ＆lt;查看样式= {styles.greetingview}＆gt;
          ＆lt; text style = {styles.greetingtext}＆gt; loading ...＆lt;/text＆gt;
        ＆lt;/view＆gt;
      ）：（（
        ＆lt;查看样式= {styles.greetingview}＆gt;
          ＆lt; text style = {styles.greetingtext}＆gt; add note ...＆lt;/text＆gt;
        ＆lt;/view＆gt;
      ）
    ＆lt;/view＆gt;
  ）；
}

thnx！

原文

Some days ago i got specific problem with GraphQL + React Native stack. All right so i have React Native App which includes:

simple router + TabsNavigator;
small containerComponent and stupid component for render data;
For work with backend i am using Apollo GraphQl (before i created server and work with this)

ISSUE: When i trying to fetch data using useQuery I get data - undefined, loading - true, but this problem actual ONLY on my Iphone or on ios Simulator.
If i run application and tested its on Web browser its work correctly - I see graphql fetch request and data/loading status changed.

For fix problem I had done before:

removed and updated dependencies;
I tried use for useEffect for follow the useQuery update status. My flow includes added data in useState if loader will be false (its dont work on Iphone, ios Simulator);
tried run useQuery inside child component.
Suppose that i don't know about some specific render details on React Native. Strange things, why application started and work fine on web browser, but dont work on Iphone, ios Simulator. Let's see some code.

Give away resolver for fetching data and fetch its in useQuery

import { gql } from '@apollo/client';
export const GET_ALL_USERS = gql
  fragment userFields on User {
    id
    username
    age
    posts {
      content
    }
  }
  query {
    getAllUsers {
      ...userFields
    }
  }

function GraphListContainer() {
  const { data, loading } = useQuery(GET_ALL_USERS);

  return (
    <View style={styles.renderBlock}>
      {data ? (
        <FlatList
          contentContainerStyle={listStyle.containerStyle}
          data={data?.getAllUsers}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item, index }) => (
            <ListRenderedTodos item={item} index={index} />
          )}
        />
      ) : loading ? (
        <View style={styles.greetingView}>
          <Text style={styles.greetingText}>Loading...</Text>
        </View>
      ) : (
        <View style={styles.greetingView}>
          <Text style={styles.greetingText}>Add Note...</Text>
        </View>
      )}
    </View>
  );
}

Thnx!

分享到QQ

分享到微博