Error when connecting to Graphql API using graphql_flutter

Question

I am trying to use graphql_flutter for my flutter app but cannot establish connection and I'm getting the following error:

I/flutter ( 6283): OperationException(linkException: ServerException(originalException: SocketException: OS Error: Connection refused, errno = 111, address = localhost, port = 36582, parsedResponse: null), graphqlErrors: [])

My guess is the error says the port is 36582 but I have my server on localhost at port 4000.

This is the code for the main app

void main() async {
  await initHiveForFlutter();

  final HttpLink httpLink = HttpLink('http://localhost:4000/');

  final AuthLink authLink = AuthLink(
    getToken: () async => 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
    // OR
    // getToken: () => 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
  );

  final Link link = authLink.concat(httpLink);

  ValueNotifier<GraphQLClient> client = ValueNotifier(
    GraphQLClient(
      link: link,
      cache: GraphQLCache(
        store: HiveStore(),
      ),
    ),
  );
  runApp(MyApp(client));
}

class MyApp extends StatelessWidget {
  final ValueNotifier<GraphQLClient> client;

  MyApp(this.client);

  @override
  Widget build(BuildContext context) {
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

Also the address is correct and does not include "/graphql" at the end. The queries work fine in postman and also in apollo-client on my angular app. Any suggestions would be appreciated.

And This is the query widget which gives the error

Query(
              options: QueryOptions(
                  document: gql(ActionData.fetchCalendarActions),
                  variables: {
                    'userId': "60157b3dd6882132841d9a25",
                    'currentList': 'calendar'
                  }),
              builder: (QueryResult result,
                  {VoidCallback refetch, FetchMore fetchMore}) {
                if (result.hasException) {
                  print(result.exception.toString());
                  return Text(result.exception.toString());
                }

                if (result.isLoading) {
                  return Text('Loading');
                }

                print(result);
                return Text('result');
              },
            ),

and this is the query:

class ActionData {
  static String fetchCalendarActions =
      """query getCalendarActions(\$userId: ID!, \$currentList: String!) {
  getActionForList(userId: \$userId, currentList: \$currentList ) {
    _id
    title
    tags
  }
}""";
}

Answer 1

The app seems unable to connect to the localhost server that has been set. If you're running into this issue with your Flutter app running on an Android emulator trying to connect to your localhost server, you need to configure the IP address of the host machine - which is 10.0.2.2. The reason for this config is discussed in more detail on this post.