React native not connecting to apollo server even use ApolloProvider - react-native

Question

I am having issues with connect react-native project with apollo server.
I followed instruction on Apollo Client https://www.apollographql.com/docs/react/get-started but still having issues get data from apollo server.
Here is my server.js from backend:
const { ApolloServer, gql } = require("apollo-server");
const {
ApolloServerPluginLandingPageLocalDefault,
} = require("apollo-server-core");
const typeDefs = gql`
type Post {
id: Int!
title: String
description: String
author: String
images: String
likes: Int
createdAt: String
}
type Query {
posts: [Post]
}
`;
const posts = [
{
id: 1,
title: "Testing",
description: "post 1",
author: "Nate",
image: "",
likes: 0,
createdAt: "2020-06-01T00:00:00.000Z",
},
{
id: 2,
title: "Post 2",
description: "post 2",
author: "Nathan",
image: "",
likes: 10,
createdAt: "2021-06-01T00:00:00.000Z",
},
];
const resolvers = {
Query: {
posts: () => posts,
},
};
const server = new ApolloServer({
typeDefs,
resolvers,
csrfPrevention: true,
cache: "bounded",
plugins: [ApolloServerPluginLandingPageLocalDefault({ embed: true })],
});
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
and here is my App.js from react-native project:
import { StyleSheet, Text, View } from "react-native";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
HttpLink,
from,
gql,
} from "#apollo/client";
import { onError } from "#apollo/client/link/error";
import List from "./components/List";
const errorLink = onError(({ graphqlErrors, networkError }) => {
if (graphqlErrors) {
graphqlErrors.map(({ message, location, path }) => {
console.log(`GraphQL error ${message}`);
});
}
});
const link = from([errorLink, new HttpLink({ uri: "http://localhost:4000/" })]);
const client = new ApolloClient({
uri: "http://localhost:4000/",
cache: new InMemoryCache(),
link: link,
});
const App = () => {
return (
<ApolloProvider client={client}>
<View style={styles.container}>
<List />
</View>
</ApolloProvider>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default App;
List.js:
...
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
description
author
image
likes
createdAt
}
}
`;
const List = () => {
const { loading, error, data } = useQuery(GET_POSTS);
useEffect(() => {
console.log("data: ", data);
}, [data]);
return (
<View>
<Text>Hello world!</Text>
</View>
);
};
export default List;
Can someone tell me where did I do wrong?
Thank you!