Skip to content
This repository was archived by the owner on Oct 2, 2024. It is now read-only.
This repository was archived by the owner on Oct 2, 2024. It is now read-only.

Using fragments prevents using cache #393

@baconcheese113

Description

@baconcheese113

I'm trying to create a sample app for others that want to use graphql-flutter and artemis, while learning how to use them myself.
It appears that fragments can only be used with FetchPolicy.noCache (not even FetchPolicy.networkOnly. Removing the cache eliminates a huge part of what makes graphl-flutter appealing, so is there any way to use artemis with fragments and cache?

In main.dart

  await initHiveForFlutter();

In app.dart

return GraphQLProvider(
      client: ValueNotifier(GraphQLClient(
        cache: GraphQLCache(store: HiveStore()),
        link: HttpLink("https://graphql-pokeapi.graphcdn.app"),
      )),
      child: MaterialApp(
        title: "Pokemon Demo",
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/':
            default:
              return MaterialPageRoute(builder: (_) => PokemonListScreen());
          }
        },
      ),
    );

In pokemon_list.query.graphql

query PokemonList {
    pokemons(limit: 50) {
        count
        results {
            id
            ...pokemonListCard_item
        }
    }
}

In pokemon_list_card.fragment.graphql

fragment pokemonListCard_item on PokemonItem {
    url
    name
    image
    artwork
}

In pokemon_list.dart

return Query(
        options: QueryOptions(
          document: POKEMON_LIST_QUERY_DOCUMENT,
          operationName: POKEMON_LIST_QUERY_DOCUMENT_OPERATION_NAME,
          fetchPolicy: FetchPolicy.noCache, // This prevents using the cache!!
        ),
        builder: (QueryResult result, {fetchMore, refetch}) {
          if (result.isLoading) return CircularProgressIndicator();
          if (result.hasException) return Center(child: Text(result.exception!.toString()));

          print("result is $result");
          // >>>>>result.data is missing all fragment data with a different fetch policy <<<<<
          final data = PokemonList$Query.fromJson(result.data!);

          final cardList = data.pokemons!.results!.map((pokemon) {
            print("Pokemon name: ${pokemon!.name}");
            return PokemonListCard(itemFrag: pokemon);
          }).toList();

          return RefreshIndicator(
              child: ListView(children: cardList),
              onRefresh: () async {
                await refetch!();
              });
        });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions