Graphql-flutter: Question on implementation practice in a more realistic environment perhaps...

Created on 5 Sep 2018  ·  4Comments  ·  Source: zino-app/graphql-flutter

Is your feature request related to a problem? Please describe.
Reading your documentation -- I am not certain how to implement this is my Flutter App. Specifically, our App has quite a long and lengthy signup/login process before we can get the JWT for the Auth token that is needed to access the GraphQL server.

In fact, it's not for a little while before we even know where the GraphQL server side is located...

So it's not feasible to put all that startup logic, etc. in the Main App ...

Also -- our JWTs expire after N minutes and get renewed -- so we need to modify the HttpLink when that happens and have no idea how to do so...

Also -- we currently have quite a bit of code in our scoped-model logic -- and there are places for sure where I'd like to execute some GraphQL queries .. but .. that code really is independent of any Widget per se .. so not sure how to use the GraphQL / client in that context either ...

Describe the solution you'd like

More examples or more documentation on OTHER implementation that don't depend on it happening right at the start -- with variable plugins that can change over time in the same app..

There is probably a way to -- once ready -- do the "init" and grab and save the client to some static class area that can be retrieved later .. and then .. hmm.. use GraphQLClient all over the place (or at least at the highest level Routes?) .. Can it be used within the routing mechanism somehow?

Anyway -- now you can see why I have so many questions on how to actually use this.. ! LOL

Cheers and nice work on this BTW -- We are using ApolloClient in our Vue web app and love it there.. and obviously this looks very promising too !

next question

Most helpful comment

Hi @sjmcdowall,

We are aware there is still a lack of documentation for this project. We're planning on creating some static docs.

Until then here are some pointers:

Updating http options though the context

You can update the http options (like headers) by passing them to context in the query. That would look something like this:

Query(
  options: QueryOptions(
    document: queries.readRepositories,
    pollInterval: 4,
    context: <String, dynamic>{
      'headers': <String, String>{
        'Authorization': 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
      },
    },
  ),
  builder: (QueryResult result) {
    ...
  },
);

Calling the client from outside a Flutter context

Although not (yet) documented, you can call the the client directly. The client exposes two methods: GraphQLClient.query and GraphQLClient.mutate. They both resolve a single query according to the options specified and return a Future which resolves with the resulting data or throws an error.

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

GraphQLClient client = GraphQLClient(
  cache: InMemoryCache(),
  link: link,
);

Future<QueryResult> queryResult = client.query(
  QueryOptions(
    document: queries.readRepositories,
  ),
);

Hope that helps! ✌🏻

All 4 comments

Hi @sjmcdowall,

We are aware there is still a lack of documentation for this project. We're planning on creating some static docs.

Until then here are some pointers:

Updating http options though the context

You can update the http options (like headers) by passing them to context in the query. That would look something like this:

Query(
  options: QueryOptions(
    document: queries.readRepositories,
    pollInterval: 4,
    context: <String, dynamic>{
      'headers': <String, String>{
        'Authorization': 'Bearer <YOUR_PERSONAL_ACCESS_TOKEN>',
      },
    },
  ),
  builder: (QueryResult result) {
    ...
  },
);

Calling the client from outside a Flutter context

Although not (yet) documented, you can call the the client directly. The client exposes two methods: GraphQLClient.query and GraphQLClient.mutate. They both resolve a single query according to the options specified and return a Future which resolves with the resulting data or throws an error.

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

GraphQLClient client = GraphQLClient(
  cache: InMemoryCache(),
  link: link,
);

Future<QueryResult> queryResult = client.query(
  QueryOptions(
    document: queries.readRepositories,
  ),
);

Hope that helps! ✌🏻

That is perfect and awesome doc! Can't wait to give it a whirl later today!!

I am trying this (finally) in the code and am getting an error on using what I think you say are static methods .query on the GraphQLClient ?

await GraphQLClient.query(QueryOptions(

[dart] Instance member 'query' can't be accessed using static access.
query(QueryOptions options) → Future
package:graphql_flutter

This resolves a single query according to the options specified and returns a Futurewhich resolves with the resulting data or throws an error.
Past of this code:

try {
  QueryResult result = await GraphQLClient.query(QueryOptions(
    document: queryMyTasks,
    context: <String, dynamic>{
      'headers': <String, String>{
        'Authorization': 'Bearer ${model.token}',
        'X-MM-Organization': '${model.customerId}',
      }
    },
  ));

I am obviously missing something ... :)

Calling the client from outside a Flutter context

Although not (yet) documented, you can call the the client directly. The client exposes two methods: GraphQLClient.query and GraphQLClient.mutate. They both resolve a single query according to the options specified and return a Future which resolves with the resulting data or throws an error.

HttpLink link = HttpLink(
uri: 'https://api.github.com/graphql https://api.github.com/graphql',
headers: {
'Authorization': 'Bearer ',
},
);

GraphQLClient client = GraphQLClient(
cache: InMemoryCache(),
link: link,
);

Future queryResult = client.query(
QueryOptions(
document: queries.readRepositories,
),
);

On Sep 5, 2018, at 8:21 AM, Zino Hofmann notifications@github.com wrote:

Hi @sjmcdowall https://github.com/sjmcdowall,

We are aware there is still a lack of documentation for this project. We're planning on creating some static docs.

Until then here are some pointers:

Updating http options though the context

You can update the http options (like headers) by passing them to context in the query. That would look something like this:

Query(
options: QueryOptions(
document: queries.readRepositories,
pollInterval: 4,
context: {
'headers': {
'Authorization': 'Bearer ',
},
},
),
builder: (QueryResult result) {
...
},
);
Calling the client from outside a Flutter context

Although not (yet) documented, you can call the the client directly. The client exposes two methods: GraphQLClient.query and GraphQLClient.mutate. They both resolve a single query according to the options specified and return a Future which resolves with the resulting data or throws an error.

HttpLink link = HttpLink(
uri: 'https://api.github.com/graphql',
headers: {
'Authorization': 'Bearer ',
},
);

GraphQLClient client = GraphQLClient(
cache: InMemoryCache(),
link: link,
);

Future queryResult = client.query(
QueryOptions(
document: queries.readRepositories,
),
);
Hope that helps! ✌🏻


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/zino-app/graphql-flutter/issues/86#issuecomment-418728040, or mute the thread https://github.com/notifications/unsubscribe-auth/AB8M7QuBofnGIKFtexB1oiEtk1onhfWWks5uX8_dgaJpZM4WZ3bZ.

why this is not on documented yet?

Was this page helpful?
0 / 5 - 0 ratings