如何使用react native从graphql服务器呈现查询?

x33g5p2x  于 2023-01-18  发布在  React
关注(0)|答案(1)|浏览(112)

你好,如果这是一个愚蠢的问题,我提前道歉,但我被困在这里几个小时
我无法呈现从连接到mongodb数据库的graphql服务器查询的数据。
我做错了什么请帮帮我
我设法使用JSON.stringify函数将它们记录到console.log中
这是我的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { ApolloClient} from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider, Query } from 'react-apollo';
import gql from 'graphql-tag';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://192.168.1.34:3000/graphql' }),
  cache: new InMemoryCache()
});

const GET_USERS = gql`
 query {
  getAllUsers {
    id
    userName  
    userPassword
  }
}
`;

function GettAllUsers() {
 console.log("this is being executed")
 
  return (
    <Query query={GET_USERS}>
      {({ loading, error, data }) => {
        if (loading){ 
          console.log(loading)
          return(
         <View>
          <Text>loading</Text>
          
          </View>
          )
        }
        if (error){
          console.log(error)
          return (
          <View>
            <Text>error</Text>
            
          </View>
        )
        } 
        
        Object.keys(data).forEach(key => {
          console.log(JSON.stringify(key)  + JSON.stringify(data[key]));
        });
        
        return (
          <View><Text>{data}</Text></View>
        );
      }}
    </Query>
  );
}

export default function App() {
  return (
    <ApolloProvider client={client}>
    <View style={styles.container}>
      <Text>si lees esto es que estoy funcionando uwus!</Text>
      <GettAllUsers/>
      <StatusBar style="auto" />
   
    </View>
    
    </ApolloProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
x9ybnkn6

x9ybnkn61#

查询运行后,data.getAllUsers将是一个用户对象的 * 数组 *。

return (
  <View><Text>{data}</Text></View>
);

你需要将数组Map到你想要的HTML中。

return (
  <View>
    {data.getAllUsers.map(({ id, userName, userPassword}) => (
      <View>
        <Text>{id}</Text>
        <Text>{userName}</Text>
        <Text>{userPassword}</Text>
      </View>
    ))}
  </View>
);

相关问题