f / graphql.js Goto Github PK

Hi,

I am trying to use graphql.js inside the Google Cloud Functions to query my database through a Graphql interface.

However when I try to set the URL, I get this error:

textPayload: "TypeError: query.trim is not a function
    at Object.helper (/srv/node_modules/graphql.js/graphql.js:425:80)
    at GraphQLClient.that.(anonymous function) [as query] (/srv/node_modules/graphql.js/graphql.js:442:23)
    at listAggregators (/srv/lib/intents/location-permission.js:17:54)

Here is my code:

const graphql = require('graphql.js');

function listAggregators(conv: DialogflowConversation) {
  const graph = graphql('https://graphql.staging.mygraphq.com/graphql');
 // [...]
}

Should I set some extra parameters here?

Note: I am using typescript, instead of javascript. Maybe there is some compiler option that I should set, because I also get a compile error when I try to use import instead of require in import graphql from 'graphql.js';

Thanks,
Komyg

Is implementing a cache within the scope of this project?

I've got this to work using Postman, however the following code generates a JSON parse error?

Code

const graphql = require('graphql.js');
const graph = graphql('https://api.github.com/graphql', {
  method: "POST",
  headers: {
    "User-Agent": "node",
    "Authorization": "Bearer <github-token>"
  }
});

const query = graph(`query { viewer { login name } }`);

query().then(
  res => console.log(JSON.stringify(res)),
  err => console.error(err)
);

Error

{ message: 'Problems parsing JSON',
  documentation_url: 'https://developer.github.com/v4' }

Hello,

The backend is attempting to set a cookie by using a cookie request. Typically, in front end applications one uses credentials: true or credentials: "included" which then sets the cookie, but this does not seem to be working. In the network tab, I can see the cookie request come in, yet it never actually sticks as a cookie. What setting should I use in my headers to enable credentials?

    var graph = graphql("http://localhost:3000/api/graphql", {
        headers: {
            credentials: "include",
            "Authorization": "",
        },
        asJSON: true,
    });

Thank you

Thanks for the great work with this client!

Are there any plans for supporting sending of queries built with the .ql function?

I have the following setup

export const graph = graphql('/graphql', {
  method: 'POST',
  asJSON: true,
  debug: true,
});

graph.fragment({
  video: `on Video {
    id
    description
    duration
    videoType
  }`,
  category: `on Category {
    id
    name
    categoryType
  }`,
});

export const videos = graph.query('{ videos { ...video } }');

export const categories = graph.query('{ categories { ...category } }');

I try to use the "merge" functionality like so.

queries.videos.merge('test');
queries.categories.merge('test');
queries.graph.commit('test').then((r) => console.log('all', r));

Now the query sent to my server is as follows.

query  {
merge993382_videos :{ videos { ... video } }
merge278951_categories :{ categories { ... category } }
 }

fragment video on Video {
    id
    description
    duration
    videoType
  }

fragment category on Category {
    id
    name
    categoryType
  }

Which is, of course, invalid as the extra {} shouldn't be there around the query pieces.

I'm using graphql.js version 0.6.7

This code doesn't work in v0.6.2 but works in v0.4.0:

const client = graphql('/api')
client.query(`query { me }`, { var1: '42' }).then(/* ... */ )

It seems like once number of arguments to returning function of GraphQLClient.prototype.createSenderFunction had changed from one to three, it became not working.

I had managed to fix it in three ways:

1. Add two extra arguments to query

- client.query(`query { me }`, { var1: '42' }).then(/* ... */ )
+ client.query(`query { me }`, '', '', { var1: '42' }).then(/* ... */ )

2. Remove query type from GraphQL query string

- client.query(`query { me }`, { var1: '42' }).then(/* ... */ )
+ client.query(`{ me }`, { var1: '42' }).then(/* ... */ )

3. Add caller call to graphql.js itself to behave like 0.4.20 version before changes in GraphQLClient.prototype.createSenderFunction

if (arguments.length > 3) {
    return caller.apply(null, Array.prototype.slice.call(arguments, 3))
}
+if (arguments.length > 1) {
+    return caller.apply(null, Array.prototype.slice.call(arguments, 1))
+}
return caller

@f what is the correct way to fix this problem?

Hi!
Does this mean that if I pass value 10 it will be declared as Int in my query, even though on server the field is declared as Float?

    var typeMap = {
      string: "String",
      number: function (value) {
        return value % 1 === 0 ? "Int" : "Float";
      },
      boolean: "Boolean"
    }

Thanks.

Hello!

I'm not sure if that's a responsibility of this lib or not but i'm building a search widget based on graphql server and graphql.js lib and was wondering - is there any way to abort/cancel pending request done by graphql.js?

Sometimes user changes his query during load of a previous query which generates two parallel requests and leads to weird results. It would be great to be able to run some abort() method on mutate() or query() instance to kill the request.

Thanks!

When making requests in node with 0.6.3, they always fail with:

TypeError: __doRequest is not a function
  at __request (node_modules/graphql.js/graphql.js:109:5)
  at .../node_modules/graphql.js/graphql.js:320:11

This worked fine in v0.6.2. I'm testing specifically with node 10.15.3, but I suspect all versions are affected.

It looks like this is happening because https://github.com/f/graphql.js/pull/38/files flipped the test to define __doRequest for node.js from:

typeof require == 'function'

to:

typeof require !== 'function'

See the resulting code here: https://github.com/f/graphql.js/blob/master/graphql.js#L54-L82

This is never true in node, and neither is the XMLHttpRequest test above, so __doRequest is always undefined, and no requests can ever be made.

Hi, why i can't to use recursive fragments?
Error: Recursive fragment usage detected on folderFragment.
Recursive fragments are working in ApolloClient, original GraphQL and i have added pull request in lokka.

I couldn't get this to work in the browser, I wrote a small test program that just runs a query and ran it with node and then in the browser.

This is probably just me using it wrong, if so I apologize

Thanks in advance

I can't understand what I'm doing wrong, but all mutations calls fail with this error in the browser console:

Uncaught TypeError: that [m.method] (...) is not a function
at GraphQLClient.that.(/Users/.../anonymous function).run (file:///Users/.../vendor/graphql.min.js:1:8351)
at deleteAuthor (app.js:82)
at HTMLButtonElement. (app.js:15)
at HTMLButtonElement.dispatch (jquery.min.js:2)
at HTMLButtonElement.y.handle (jquery.min.js:2)
that.(anonymous function).run @ graphql.min.js:1
deleteAuthor @ app.js:82
(anonymous) @ app.js:15
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

Here's how I run the migration:

var q = `DeleteAuthor($id: ID) {DeleteAuthor(id: $id)}`;
var vars = {id: id};

graph.mutate.run(q, vars).then(function (r) {
    alert(`Author ${id} deleted.`);
}).catch(function (error) {
    alert(JSON.stringify(error))
})

I'm trying this in Chrome 66. Any ideas?

Hi

Can you confirm if jquery is dropped, because it still appears at top of github and in package.json.

Thanks

I've discovered that Webpack's default production build minifies graphql.js in a strange way, and breaks the isomorphic nature of this library. It might be a webpack problem but I wanted to see if others had encountered this issue. It seems that the problem relates to a specific part of graphql.js's code.

When Webpack's minifier processes this condition starting line 34:

if (typeof XMLHttpRequest !== 'undefined') {
// browser compatible __doRequest function
} else if (typeof require === 'function') {
// node compatible __doRequest function
}

It turns it into:

if ("undefined" != typeof XMLHttpRequest);
else {}

And it removes the browser-compatible definition of __doRequest, so we're only left with the Node-compatible one that depends on the native libraries http, https, and url. It doesn't actually break a build because Webpack automatically pulls in node polyfills. But this means that graphql.js adds far more than 4kb to a bundle, in fact it bloats the bundle by about 25kb gzipped!

Would you have any idea why it's doing this? This only happens when minifying.

To reproduce:

1. Clone this repo
2. Run npm install
3. Run npm build-prod
4. Open dist/main.beautified.js and go to line 2296.

You should see this code:

        if ("undefined" != typeof XMLHttpRequest); // if condition appears here, empty.
        else {}

        function o(t, e, n, o, s, a, u, f) {
            if (n) {
                if (a) var h = JSON.stringify({
                    query: s.query,
                    variables: s.variables
                });
                else h = "query=" + encodeURIComponent(s.query) + "&variables=" + encodeURIComponent(JSON.stringify(s.variables));
                for (var c in t && (console.groupCollapsed("[graphql]: " + e.toUpperCase() + " " + n + ": " + s.query.split(/\n/)[0].substr(0, 50) + "... with " + JSON.stringify(s.variables).substr(0, 50) + "..."), console.log("QUERY: %c%s", "font-weight: bold", s.query), console.log("VARIABLES: %c%s\n\nsending as " + (a ? "json" : "form url-data"), "font-weight: bold", JSON.stringify(s.variables, null, 2), s.variables), console.groupEnd()), o) "function" == typeof o[c] && (o[c] = o[c]());
                ! function(t, e, n, o, s, a, u, f) { // this is the node-compatible __doRequest function
                    var h = r(9), // http node library
                        c = r(42), // https node library
                        l = r(8).parse(e), // url node library
                        p = ("https:" === l.protocol ? c : h).request({
                            protocol: l.protocol,
                            hostname: l.hostname,
                            port: l.port,
                            path: l.path,
                            method: t.toUpperCase(),
                            headers: i({
                                "Content-type": n,
                                Accept: o
                            }, s)
                        }, (function(t) {
                            var e = "";
                            t.setEncoding("utf8"), t.on("data", (function(t) {
                                e += t
                            })), t.on("end", (function() {
                                f(JSON.parse(e), t.statusCode)
                            }))
                        }));
                    "function" == typeof u && p.on("error", (function(t) {
                        u(t)
                    })), p.write(a), p.end()
                }(e, n, a ? "application/json" : "application/x-www-form-urlencoded", "application/json", o, h, u, f)
            }
        }

Subscriptions need to be implemented.

They can be that easy:

var onCommentsAdded = graph.subscribe`{ commendAdded { user {name}, text } }`

onCommentsAdded(function (data) {
  console.log(data.user.name)
})

And can be unsubscribed.

var onCommentsAdded = graph.subscribe`{ commendAdded { user {name}, text } }`

onCommentsAdded.unsubscribe()

When trying to access the GitHub GraphQL API I'm getting the following error:

Error: Protocol "https:" not supported. Expected "http:"
    at new ClientRequest (_http_client.js:55:11)
    at Object.exports.request (http.js:31:10)
    at __request (/Users/elliotblackburn/code/life-bot/node_modules/graphql.js/graphql.js:51:22)
    at /Users/elliotblackburn/code/life-bot/node_modules/graphql.js/graphql.js:245:11
    at caller (/Users/elliotblackburn/code/life-bot/node_modules/graphql.js/graphql.js:244:16)
    at Object.<anonymous> (/Users/elliotblackburn/code/life-bot/scratch.js:44:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

Are you able to enable https for the module?

Hello,

On your README, there is this line:

No dependencies, plain vanilla JavaScript.

And in your bower.json there is this:

"dependencies": {
    "jquery": "^3.1.1"
  }

So, do your project depend on jQuery?

I can't use it because when I install your lib I must break the dependency of another lib that use jQuery 2.

Is it possible to make a es-module variant where we can just do import graph from "graphql.js"?

In my case I have over 10000 entries in json (ca. 500kB). It will be cut by the lib. I see it on network console of firefox

The header option seems to be used in a weird way. Here's how I build my graphql object:

var graph = graphql("http://localhost:3000/", {
    headers: {
        'Authorization': 'abcdef'
    }
});

And here's the HTTP request that it produces:

OPTIONS / HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36
Access-Control-Request-Headers: authorization
Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ro;q=0.8,sv;q=0.7,zh-TW;q=0.6,zh;q=0.5

As you can see, the request is changed from POST to OPTIONS, with a number of consequences. Rather than being a header in its own right, my header appears inside the 'Access-Control-Request-Headers' header, and its value is lost. No POST request is ever being made.

It appears it may not be publishing built version to npm.

Hi, I am doing something like this

		let client =  graphql("http://localhost:5000/graphql", {
		  headers: {
		    "Access-Control-Allow-Origin": "*"
		  }
		})

but I am getting the following error
Access to XMLHttpRequest at 'http://localhost:5000/graphql' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Can you please let me know what I am doing wrong here ?
Thanks

Add file upload handling.

Can this be added in any CDN like JS deliver?

I have added a temporary one https://cdn.jsdelivr.net/gh/f/graphql.js@master/graphql.min.js

After the recent licensing issues with Facebook's BSD + Patents license the company I work for is very hesitant to use any of their libraries. However we still wish to make use of the GraphQL standard as it seems to be the way of the future. So my question is, does "independent" mean that this repository has no dependencies on Facebook libraries?

Hi,

Is there a way to build/parse 'body' of the request based on query and variable instead of direct issue XMLHttpRequest to server?
This would allow uses of other 'request/fetch' option and provide more flexibility.

I love this package! We've been using graphql with React for a while now and we have a project where React isn't an option so to connect to our graphql server this is perfect. However we usually first declare our query with the template tag:

const Query = gql`
   query Stuff()...
`

And then run it by calling it.

It would be awesome if we could do the same here, is this something you plan to support? Maybe I misread the doc but from what I saw using this syntax will run the query straight away.

Thanks

I'm successfully sending the GraphQL queries to my server, the data is returning, Chrome debugger shows the response data in the network view, but my invocation of .then() never gets called. My function that I pass in to call console.log does not run, and the promise always shows as "pending" even after the call returns.

What could be the issue?

According to documentation it is possible to execute queries using the following approach:

graph(`query ($email: String!, $password: String!) {
  auth(email: $email, password: $password) {
    ... auth # if you use any fragment, it will be added to the query.
    ... error
  }
}`, {
  email: "[email protected]",
  password: "my-super-password"
}).then(function (response) {
  // response is originally response.data of query result
  console.log(response)
}).catch(function (error) {
  // response is originally response.errors of query result
  console.log(error)
})

I have been using this approach in the following way using the async await syntax.

await graph(`query`, { })

However, while this worked in version 0.4.20, I haven't been able to get it to work using version 0.6.5.

Is there something I'm overlooking, or has this approach been deprecated?

is ie11 supported?

When I use the .query() helper method with autodeclare, it works perfectly. However, .mutate() does not autodeclare the variables for input.

I can still use the main function and enter the full mutation syntax, with manual declarations. But having the helper method work properly would be nice.

I have tried using this repository to query Github's GraphQL API. But no matter what I do, I keep getting a "Problems parsing JSON" message.
An extracted piece of the code below:

var graph = graphql("https://api.github.com/graphql", {
  method: "POST",
  headers: {
    "Authorization": "Bearer <my-token-here>",
    "Content-Type": "application/json"
  },
  fragments: {
    rateLimitInfo: "on RateLimit {cost,remaining,resetAt}"
  }
});
graph(`
    query repo($name: String!, $owner: String!){
        repository(name:$name, owner:$owner){
            id      
        }
    }
`,{
    name: "freeCodeCamp",
    owner: "freeCodeCamp"
}).then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
});

With this code I always get a HTTP 400 (Bad Request) response. With the following data:

{
    message: "Problems parsing JSON", 
    documentation_url: "https://developer.github.com/v3"
}

Looking at Chrome's Network tab, I see that the request payload that is being sent is:
query=query%20repo(%24name%3A%20String!%2C%20%24owner%3A%20String!)%7Brepository(name%3A%24name%2C%20owner%3A%24owner)%7Bid%7D%7D&variables=%7B%22name%22%3A%22freeCodeCamp%22%2C%22owner%22%3A%22freeCodeCamp%22%7D
I have the same query running on Insomnia and it works. When I convert Insomnia's request to curl, the payload looks like this:
--data '{"query":"query repo($name: String!, $owner: String!){\n\trepository(name:$name, owner:$owner){\n\t\tid\t\t\n\t}\n}","variables":{"name":"freeCodeCamp","owner":"freeCodeCamp"},"operationName":"repo"}'

When decoding both strings, it is visible that both payloads have different formats.

Is this an issue with how the repository is creating the payload, is this a mistake on my code, or is this something particular to how Github's API accept the query string?

Same question posted on stackoverflow.

I'm testing out this module in a browser extension and get a CSP error because of the Function constructor used in the fragmentPath method here (trips the 'unsafe-eval' source expression for the 'script-src' directive; more info). This prevents me from using the module as-is with my extension's CSP.

In my testing, I was able to just replace that Function constructor:

var getter = new Function("fragments", "return fragments." + path.replace(/\./g, FRAGMENT_SEPERATOR));

with this:

var obj = fragments[path.replace(/\./g, FRAGMENT_SEPERATOR)];

Without issue.

Is this a change that would be considered for the module? Or am I missing something that requires the current usage?

Thanks!

I am creating this lines of code and it throws me an error saying body is not defined, although I debug and before sending the xmlrequest the body variable is defined.

` const graph = graphql(HOST);

  const signIn = graph(`query SignIn($options: UserInput!){
    signIn(options: $options)
  }`);

  try {
    const auth = await signIn({ options: { token }});

    return auth.data;
  } catch(e) {
    console.log(e.message)
  }
}`

Disclaimer: the query is tested and is working as it is.

It seems the "http.js" and "https.js" abd "url.js" is needed? where can i find these js files?

--- graphql.js ----

xhr.send(body)
} else if (typeof require == 'function') {
var http = require('http'), https = require('https'), URL = require('url'), uri = URL.parse(url);
var req = (uri.protocol === 'https:' ? https : http).request({
protocol: uri.protocol,
hostname: uri.hostname,

Context

var graphql = require('graphql.js')

var graph = graphql('someurl, {
  headers: {
    'Authorization': `Bearer XXX`,
    'Content-Type': 'application/json'
  }
}

function getX() {
  return graph('query me { name }')
}

getX().then(me => {
  console.log(me)
})

All bundled with webpack, errors on .then call and add the graph.query('...') does not seem to affect a change.

Expected Result

• Console logs data

Actual Result

• Error on .then
• No network requests made

How to set withCredentials: true to send cross-domain request?

I must admit that I am a beginner with JavaScript and web based technologies.
I followed issues #2 , #21 and #40 along with the code taken straight from this SO answer (corresponding #21), but I get the following error in console -

TypeError: graph(...).then is not a functiongraphql.html:59:4

I made a html file with the following content and all I do is open it in the browser and see the console.
Following is the content of the html file -

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="graphql.min.js"></script>
<script>
var graph = graphql("https://api.github.com/graphql", {
  headers: {
    "Authorization": "Bearer <my id>"
  },
  asJSON: true
});
graph(`
    query repo($name: String!, $owner: String!){
        repository(name:$name, owner:$owner){
            id      
        }
    }
`, {
  name: "freeCodeCamp",
  owner: "freeCodeCamp"
}).then(function(response) {
  console.log(response);
}).catch(function(error) {
  console.log(error);
});
</html>

Could you please tell me how should I make it display the response json in the console ?

Hi,

Has anyone faced this issue

POST body missing. Did you forget use body-parser middleware?

SyntaxError: Unexpected token P in JSON at position 0
    at JSON.parse (<anonymous>)
    at IncomingMessage.<anonymous> (/home/abc/server/node_modules/graphql.js/graphql.js:71:25)

this is my code

const query = graph(`mutation(
    $username: String!, 
    $password: String! ) {
      authentication {
      login(
        username: $username,
        password: $password,
        strategy: "local"
      ) {
        responseResult {
          succeeded
          errorCode
          message
        }
        jwt
      }
    }
  }`);

  query({
    username: req.body.username,
    password: req.body.password
  }).then(
    resData => {
      res.send(resData);
    },
    err => {
      console.error(err)
      res.status(500).send(err)
    }
  );

am running graphql.js in express server and not using 'body-parser' but rather uses express.json(). I am sure that I am able to read 'req.body.username' and 'req.body.password' values successfully, so why is it suggesting to use body-parser ?

Weird thing is this request runs fine on my local machine but gives this error on deployed server.

Could someone let me know, how to console.log body, before we query?

Regards