React Native Apollo + Django: Network Request Failed

Question

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,
  },
})

Answer 1

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