CODEWITHSUNDEEP
fluttergraphql
Cluadia Hedda
Cluadia Hedda

Reputation: 141

Getting error while using variable in GraphQL Flutter

I am using GraphQl in flutter. So that It filter the data based on the input in the search bar. My code is as follow:

   class HomeScreen extends StatelessWidget {
        final DateFormat _dateFormat = DateFormat("MMMM dd, yyyy");
        String query = '';

        Widget buildSearch() => SearchWidget(
           text: query,
           hintText: 'Title or Author Name',
           onChanged: searchMission(query),
        );

        searchMission($query: String!)  {
          return Query(QueryOptions(documentNode: gql('''
        launchesUpcoming(find: {
            mission_name: $query,
        })   {
          mission_name 
          launch_date_utc
          rocket {
           rocket_name
           rocket_type
         }
         links {
          flickr_images
        }
       }'''),
       variables: {'query': this.query}))),
       builder: (
        QueryResult result, {
        VoidCallback refetch,
       FetchMore fetchMore,
       }) {
      if (result.loading) {
         return Container(
           child: Center(
          child: Text("Loading"),
        ),
      );
   };
  }
  }

   @override
   Widget build(BuildContext context) {

    final List launches = result.data["launchesUpcoming"];

    if (launches == null || launches.isEmpty) {
      return Container(
        buildSearch(),
        child: Center(
          child: Text("No items found"),
        ),
      );
    } else {
      return Column(
        mainAxisSize: MainAxisSize.min,
        buildSearch(),
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(
              left: 24,
              top: 24,
            ),
            child: Text(
              "Upcoming",
              style: GoogleFonts.orbitron().copyWith(
                color: Color(0xFF005288),
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: launches.length,
            padding: const EdgeInsets.all(24),
            itemBuilder: (context, index) {
              final launch = launches[index];

              return Container(
                margin: const EdgeInsets.only(bottom: 24),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(16),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(0, 10),
                      color: Colors.grey.shade300,
                      blurRadius: 30,
                    ),
                  ],
                ),
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Center(
                      child: Text(
                        launch['mission_name'],
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16,
                          color: Color(0xFF005288),
                        ),
                      ),
                    ),
                    SizedBox(height: 12),
                    Text(
                      "Rocket",
                      style: TextStyle(
                          fontSize: 10, color: Colors.grey.shade400),
                    ),
                    Text(
                      "${launch['rocket']['rocket_name']} | ${launch['rocket']['rocket_type']}",
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 12),
                    Text(
                      "Launch date",
                      style: TextStyle(
                        fontSize: 10,
                        color: Colors.grey.shade400,
                      ),
                    ),
                    launch['launch_date_utc'] != null
                        ? Text(
                            "${_dateFormat.format(DateTime.parse(launch['launch_date_utc']))}",
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                            ),
                          )
                        : Text(
                            "TO BE DETERMINED",
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                  ],
                ),
              );
            },
          ),
        ],
      );
    }
  },
);

} }

I am getting multiple errors: 1:

        Error: Can't access 'this' in a field initializer to read 'query'.
        [   +2 ms] [        ]      mission_name: $query,

2:

         Error: The parameter 'client' can't have a value of 'null' because of its
         type 'ValueNotifier<GraphQLClient>', but the implicit default value is 'null'.

3:

         Error: The method 'SearchWidget' isn't defined for the class 'HomeScreen'.
        [   +1 ms] [        ]  - 'HomeScreen' is from 
        'package:spacex_land/screens/home/home.screen.dart'
        ('lib/screens/home/home.screen.dart').
        [        ] [        ] Try correcting the name to the name of an existing method, or defining a method named 'SearchWidget'.
        [   +1 ms] [        ] Widget buildSearch() => SearchWidget(

4:

         Error: Too many positional arguments: 0 allowed, but 1 found.
        [        ] [        ] Try removing the extra positional arguments.
        [        ] [        ]         return 
       Query(QueryOptions(documentNode: gql(_query),

Everything was working before I added variable in GraphQL query and searcbar code. Please see my code, if you know what is wrong in it then please let me know. Thanks

Upvotes: 2

Views: 1002

Answers (1)

H S W
H S W

Reputation: 7119

You have brackets issues and some other issues. It can be solved as follow:

class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
 ScrollController scrollConltroler = new ScrollController();
 String query = '';
 List filteredLaunches = [];
 Timer? debouncer;
 String searchQuery = '''
    query mylaunches  {
  launches {
  mission_name 
  details  
  }
}
  ''';

@override
void initState() {
  super.initState();
  // init();
}

@override
void dispose() {
  debouncer?.cancel();
  super.dispose();
}

void debounce(
   VoidCallback callback, {
   Duration duration = const Duration(milliseconds: 500),
}) {
   if (debouncer != null) {
     debouncer!.cancel();
   }

  debouncer = Timer(duration, callback);
 }

Widget buildSearch() => SearchWidget(
    key: ValueKey(query),
    text: query,
    hintText: 'Enter mission name',
    onChanged: searchMission,
  );

 searchMission(String mission_name) => debounce(() {
    if (mission_name.length > 2) {
      searchQuery = '''
    query mylaunches  {
  launches(find: {
 mission_name: "$mission_name"
})   {
  mission_name 
  details  
}
}
   ''';

      setState(() {
        this.query = mission_name;
      });
    }
  });

@override
Widget build(BuildContext context) {
return Query(
    options: QueryOptions(documentNode: gql(searchQuery)),
    builder: (
      QueryResult result, {
      VoidCallback? refetch,
      FetchMore? fetchMore,
    }) {
      if (result.data == null) {
        return new Scaffold(
          appBar: AppBar(
            title: Text('launches'),
            centerTitle: true,
          ),
          body: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              buildSearch(),
              Center(
                child: Text(
                  'Let use see',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: Color(0xFF005288),
                  ),
                ),
              ),
            ],
          ),
        );
      } else {
        List launches = result.data["launches"];
        return new Scaffold(
            appBar: AppBar(
              title: Text('Launches'),
              centerTitle: true,
            ),
            body: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                buildSearch(),
                Expanded(
                  child: ListView.builder(
                    physics: const AlwaysScrollableScrollPhysics(),
                    controller: scrollConltroler,
                    shrinkWrap: true,
                    itemCount: launches.length,
                    padding: const EdgeInsets.all(24),
                    itemBuilder: (context, index) {
                      final launch = launches[index];

                      return Container(
                        margin: const EdgeInsets.only(bottom: 24),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(16),
                          boxShadow: [
                            BoxShadow(
                              offset: Offset(0, 10),
                              color: Colors.grey.shade300,
                              blurRadius: 30,
                            ),
                          ],
                        ),
                        padding: const EdgeInsets.all(20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Center(
                              child: Text(
                                launch['mission_name'],
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16,
                                  color: Color(0xFF005288),
                                ),
                              ),
                            ),
                            SizedBox(height: 12),
                            launch['details'] != null
                                ? Text(
                                    launch['details'],
                                    style: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  )
                                : Text(
                                    "TO BE DETERMINED",
                                    style: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                            SizedBox(height: 12)
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ],
            ));
      }
    });
 }
}

Upvotes: 1

Related Questions