Storefront and Admin API with Flutter

[SPJVR]

I want to fetch data from my Shopify webshop using the storefront API. I am using the flutter_graphql package.

I have two questions.

Question 1: In the the flutter graphql package the documentation shows a snippet:

void main() {
  HttpLink link = HttpLink(
    uri: 'https://api.github.com/graphql',
    headers: <String, String>{
      'Authorization': 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
    },
  );

Using the uri does not work, "The named parameter 'uri' isn't defined". I have found similiar questions but no answers, this seems (what I know of) being the only way of using the token what I have found.

Question 2: Since Storefront API does not work. In the example below, I have used the Admin API which works (almost) since I print out the correct data:

const testGraphQL = """
query products {
  products(first: 5) {
    edges {
      node {
        id
        title
      }
    }
  }
}
""";

void main() {
  final HttpLink httpLink = HttpLink(
      'https://{apikey}:{password}@{hostname}/admin/api/{version}/{resource}/graphql.json');
  ValueNotifier<GraphQLClient> client = ValueNotifier(GraphQLClient(
      link: httpLink, cache: GraphQLCache(store: InMemoryStore())));
  var app = GraphQLProvider(client: client, child: MyApp());
  runApp(app);
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Query(
              options: QueryOptions(document: gql(testGraphQL)),
              builder: (QueryResult result, {fetchMore, refetch}) {
                if (result.hasException) {
                  return Text(result.exception.toString());
                }

                if (result.isLoading) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
                final testGraphQL = result.data?['products']['edges'];
                print(testGraphQL);
                return Text(testGraphQL);
              }
          ),
        ),
      ),
    );
  }
}

Code Above gives this error:

I/flutter (22015): [{__typename: ProductEdge, node: {__typename: Product, id: gid://shopify/Product/7049279406245, title: T-shirt}}]

======== Exception caught by widgets library =======================================================
The following _TypeError was thrown building StreamBuilder<QueryResult>(dirty, state: _StreamBuilderBaseState<QueryResult, AsyncSnapshot<QueryResult>>#d1156):
type 'List<Object?>' is not a subtype of type 'String'

I am not sure why, but I believe it could be that im returning more than one object. Problem is I am not sure how to fetch these objectes in an array seperately.

[HunkyBill]

Storefront API is meant for use on the front-end, to facilitate shopping. The Admin API is for use working on store data from a back-end, secure perspective. Not sure what you mean when you say Storefront API does not work. Of course it does. Your code does not work, two different things.

As for using GQL to get products, it is true, you always get an array back, never a string. You have to prepare your code for that. Examine the results of your query. You'll see an array.

[SPJVR]

Hi HunkyBill,

Thank you for answering my question. I want to start with by saying I am no Flutter nor a API expert, both of these areas are new to me. 

What I mean is, the code snippet from the package for getting the token does not work, hence the storefront API does not work in my case. Are you saying that I am using the snippet wrong or are you saying the storefront API works in general? The later I know of thats the issue, code gives an error on "uri" line and I need help with how to do this thats the reason I post here.

Right now, Admin API works just fine, after changing the return in the Query to:

return Column(
  children: [
    Padding(
      padding: EdgeInsets.all(16.0),
      child: Text(
        "Products",
        style: Theme.of(context).textTheme.headline5,
      ),
    ),
    Expanded(
        child: GridView.builder(
            itemCount: testGraphQL.length,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
            itemBuilder: (_, index) {
              return Text(testGraphQL[index]['node']['title']);
            })),

Thanks.