0

I'm very new to programming and couldn't understand how my react native expo app isn't fetching data from my Django server (which is running). How can I resolve this?

I've got graphene-django running at the back.

Here's my App.js

Network Error: Network Request Failed

PS. I definitely need more practice on this. Thanks for the help.

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost'
import { ApolloProvider, gql, useQuery } from '@apollo/client'


const client = new ApolloClient({
  link: new HttpLink({
    uri: 'http://(local-ip-address):8000/graphql'
  }),
  cache: new InMemoryCache(),
})

const todoQuery = gql`
  query fetchTodo {
    todos {
      rank
      title
      content
    }
  }
`;

const TodoComponent = () => {
  const { loading, error, data } = useQuery(todoQuery);

  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <ul>
      {data.todos.title.map((title) => (
              <li>{title}</li>
        ))}
    </ul>   
  );
};


export default class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <View style={styles.container}>
          <Text style={styles.welcome}>Welcome to React Native!</Text>
          <Text>
            <TodoComponent style={styles.welcome}/>
          </Text>
        </View>
      </ApolloProvider>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})
Virtual Gravity
  • 1

1 Answers1

0

Your django server is running when you run your react application. Sometime because of that this error is come.

Ankit Tiwari
  • 4,438
  • 4
  • 14
  • 41
  • I'm sorry, I don't quite follow, could you expound a bit please? So my django server shouldn't be running when I run my react native application? Thanks. – Virtual Gravity Dec 18 '20 at 02:00
  • if you want to fetch data from your django application you have to run your django server when yur are fetching data in your react app or it will give error of 404 or Network Error: Network Request Failed – Ankit Tiwari Dec 18 '20 at 05:26
  • Oh yes, the django server is up and running when I'm requesting data but it just loads for a long time and then ends up with "Network Error: Network Request Failed." I still don't get why it doesn't fetch the data... – Virtual Gravity Dec 19 '20 at 02:46
  • Pardon me for the late response. Here are the screenshots along with the gql query, https://drive.google.com/drive/folders/18bVjpEWfEmH3dwgQ3wBIoSBaNtwMcVuk?usp=sharing. – Virtual Gravity Dec 23 '20 at 13:38
  • Sorry, I have never worked on graphene-django. I tried to find a solution to this error, I found this check this i think you will get some help from here https://github.com/apollographql/react-apollo/issues/758 – Ankit Tiwari Dec 23 '20 at 18:57
  • Have you entered a ip address or localhost – Ankit Tiwari Dec 23 '20 at 19:03
  • enter ip address it comes becouse of that also sometimes – Ankit Tiwari Dec 23 '20 at 19:04
  • Ah yes, I did put my machine's ip address. – Virtual Gravity Dec 24 '20 at 10:34