Calling ApolloClient (GQL) on clientside?

Last year we built a Chrome Extension to make custom tweaks to Sonar UI.
I’m in the process of updating it to V2.

It looks like you are using Vue/Apollo to make your GQL calls.
Can you help me understand how I might make a GQL call also?
(I know I could just impliment my own with JQuery, but since you already have it available…)

// From the root scope I can get Apollo instance:
SC.get("apollo")
> ApolloClient {defaultOptions: {…}, resetStoreCallbacks: Array(0), clearStoreCallbacks: Array(0), clientAwareness: {…}, link: ApolloLink, …}

// So I should be able to do something like this...
SC.get("apollo").query({
   query: gql `
    { 
     users{
       entities{
         id
         name
       }
     }
    }`
 })

But I get this error. I think I don’t have access to gql variable.

VM9320:2 Uncaught ReferenceError: gql is not defined

In your source you access it this way (graphql_tag__WEBPACK_IMPORTED_MODULE_0___default.a), but I’m not sure if theres a way I could get scoped to where it’s located:

 SC.get("apollo").query({
                        query: graphql_tag__WEBPACK_IMPORTED_MODULE_0___default.a `
                    query (
                        $accountId: Int64Bit!,
                        $startDateTime: Datetime!,
                        $endDateTime: Datetime!
                    ) {

Paging @devin

The gql variable is this npm package – https://www.npmjs.com/package/graphql-tag – so it’s probably easiest for you to alias graphql_tag__WEBPACK_IMPORTED_MODULE_0___default.a as window.gqlTag depending on what you’re doing.

Sonar v2 has a lot more functionality in the browser now, and I’ll be posting some public docs sometime this summer detailing what’s available. I invite you to look at Requery, which is a custom chain-able query builder and fetcher. There’s a little learning curve due to having to understand the frontend abstraction on the GQL API (e.g. the frontend has its own collection of Models), and there are a lot of details to know. Here’s a few simple examples you can run in your browser to give you an idea:

let Accounts = await Make.Requery('Account').all()

The basics are: Make is our MakeService, which is a shortcut to generates various class instances; Requery is our abstracted GQL builder/fetcher; the ‘Account’ argument is a model name, which is how we identify entities to request; all() means it’ll fetch all within a pagination limit – you can also do first().

Some examples I ran in my console:

There’s a lot more to this, especially with our Model concept, but this should be enough to play around with.

Lastly, a recent update included a new development tool that I’ll continue to expand on. You can open it by typing helpMe in your console. It’ll open a viewer with your recent requests and mutations.

1 Like

Excellent!! This is good stuff. Thank you.