how to refetch or invalidate queries after mutations

[iamhaaamed]

I have a screen that contains list of todos like this:

import 'package:dio/dio.dart';
import 'package:fl_query/fl_query.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:to_do_app/di/locator.dart';
import 'package:to_do_app/widgets/create_or_edit_todo_dialog.dart';
import 'package:to_do_app/widgets/custom_drawer.dart';

final dio = getIt.get<Dio>();

final todosQueryJob = QueryJob<List, void>(
  queryKey: "todos", // have to be unique
  task: (queryKey, externalData) async {
    final res = await dio.get("http://localhost:3000/todos");
    return res.data;
  },
);

class TodosListScreen extends StatefulHookWidget {
  const TodosListScreen({Key? key}) : super(key: key);

  @override
  State<TodosListScreen> createState() => _TodosListScreenState();
}

class _TodosListScreenState extends State<TodosListScreen> {
  @override
  Widget build(BuildContext context) {
    final todosQuery = useQuery(job: todosQueryJob, externalData: null);

    if (!todosQuery.hasData || todosQuery.isLoading) {
      return const CircularProgressIndicator();
    }

    return Scaffold(
      drawer: const CustomDrawer(),
      appBar: AppBar(title: const Text("Todos")),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await showDialog(
            context: context,
            builder: (context) => const AlertDialog(
              title: Text('Add Todo'),
              content: CreateOrEditTodoDialog(),
            ),
          );
        },
        tooltip: 'Add',
        child: const Icon(Icons.add),
      ),
      body: ListView.builder(
        itemCount: todosQuery.data!.length,
        itemBuilder: (context, index) => Row(
          children: [
            Expanded(
              child: CheckboxListTile(
                value: todosQuery.data![index]["completed"],
                onChanged: (newValue) {},
                controlAffinity: ListTileControlAffinity.leading,
              ),
            ),
            Text(todosQuery.data![index]["title"] ?? ''),
            const Gap(20),
            Row(
              children: [
                IconButton(
                  icon: const Icon(Icons.edit),
                  onPressed: () async {
                    await showDialog(
                      context: context,
                      builder: (context) => AlertDialog(
                        title: const Text('Edit Todo'),
                        content: CreateOrEditTodoDialog(
                            id: todosQuery.data![index]["id"]),
                      ),
                    );
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

and I have a AlertDialog that when the user press on the FloatingActionButton it will appear and user can add new todo:

import 'package:dio/dio.dart';
import 'package:fl_query/fl_query.dart';
import 'package:fl_query_hooks/fl_query_hooks.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:to_do_app/di/locator.dart';

final dio = getIt.get<Dio>();

class CreateOrEditTodoDialog extends HookWidget {
  const CreateOrEditTodoDialog({Key? key, this.id = ''}) : super(key: key);

  final String id;

  @override
  Widget build(BuildContext context) {
    GlobalKey<FormState> formKey = GlobalKey<FormState>();

    final createMutationHookJob = MutationJob<Map, Map<String, dynamic>>(
      mutationKey: "basic-hook-mutation-todo",
      task: (key, data) async {
        final response =
            await dio.post('http://localhost:3000/todos', data: data);
        return response.data;
      },
    );

    final titleController = useTextEditingController(text: '');
    final bodyController = useTextEditingController(text: '');

    final createMutation = useMutation(
      job: createMutationHookJob,
      onData: (payload, variables, context) {
        context.pop();
      },
    );

    final todoQueryJob = QueryJob<Map, void>(
      queryKey: "todos",
      task: (queryKey, externalData) async {
        final res = await dio.get("http://localhost:3000/todos/$id");
        return res.data;
      },
    );

    final query = useQuery(
      job: todoQueryJob,
      externalData: null,
    );

    useEffect(() {
      titleController.text = id != '' ? (query.data?['title']) : '';
      bodyController.text = id != '' ? (query.data?['body']) : '';

      return null;
    }, [query.data]);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Form(
          key: formKey,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                TextFormField(
                  controller: titleController,
                ),
                TextFormField(
                  controller: bodyController,
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    minimumSize: const Size.fromHeight(50),
                  ),
                  child: const Text("Save"),
                  onPressed: () async {
                    if (formKey.currentState!.validate()) {
                      createMutation.mutate(
                        {
                          "title": titleController.text,
                          "body": bodyController.text,
                        },
                      );
                    }
                  },
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}

I want the list to be updated after create mutation and the new item appeared in the list on pop. How can I achieve that?

[KRTirtho]

Firstly, all kinds of job (QueryJob/MutationJob/InfiniteQuery) shouldn't be created inside Widget build method
It creates unnecessary instances of the same Job and will eventually lead to stale/duplicate Query/Mutation. I recommend creating those job globally outside the scope of any Function/Method
If you need to pass external data or any kind of variable utilize the externalData parameter of QueryJob.task. You can find the example here: https://fl-query.vercel.app/docs/basics/QueryJob#external-data

Then, you don't have to use useEffect with query.data dependency. You can directly use onData event callback of useQuery/useMutation

Finally, what you're trying to acheive is Optimistic Updates

[iamhaaamed]

Thank you for your response. I used onData of useQuery but it returns null although I have data in query.data:

final todoQueryJob = QueryJob.withVariableKey<Response, void>(
  preQueryKey: "todo-by-id",
  refetchOnExternalDataChange: true,
  task: (queryKey, externalData) async {
    final res =
        await dio.get("http://localhost:3000/todos/${getVariable(queryKey)}");
    return res;
  },
);

    var query = useQuery(
      job: todoQueryJob(id),
      externalData: null,
      onData: (data) {
        print(data); // ====> prints null
      },
    );

    print(query
        .data); // ====> prints {"title":"7","body":"7","preview":"","completed":false,"id":"I596D2F"}

[KRTirtho]

This was a bug. Thanks for reporting. Fix will be available in the next version

[KRTirtho]

@iamhaaamed v0.3.1 fixed the issue