kadirahq / lokka Goto Github PK

I am running into issues trying to get Lokka to work in React Native. Looks like it's due to some of the deps that node-fetch has (notably url, http)

When there are dots in string query throws error

createStatement( message: "I had ...I wanted" ){id}

Error: There is no such fragment: I at /Users/bridebook2/dev/supplierT/node_modules/lokka/index.js:91:19 at Array.forEach (native) at Lokka._findFragments (/Users/bridebook2/dev/supplierT/node_modules/lokka/index.js:88:23)

and generally working with string have a lot of issues, so far I have to escape all characters like single quote, new lines, etc....very inconvenient.... and now this

The Lokka docs provide the following example of how to make and use a fragment:

const filmInfo = client.createFragment(`
  fragment on Film {
    title,
    director,
    releaseDate
  }
`);
client.query(`
  {
    allFilms {
      films {
        ...${filmInfo}
      }
    }
  }
`).then(result => {
  console.log(result.allFilms.films);
});

But you can do the same thing much more simply:

const filmInfo = `
    title,
    director,
    releaseDate`;
// The rest of the code remains the same except:
//        ...${filmInfo}
// becomes:
            ${filmInfo}

It's unclear to me what the benefit of using client.createFragment is. Even a sentence or two in the docs about that would be helpful.

I like what you're doing here -- Relay has a ton of awesome features but they're so opinionated, its hard to work with on your own. But two really hard features are going to be latency compensation and caching -- I'm curious what your angle of attack is going to be on these?

After finding the babel-graphql-plugin, I didnt realize that graphql parses to a simple JSON tree:

https://github.com/ooflorent/babel-plugin-graphql

I suppose diffing wouldnt be too hard, but then theres a question of how to organize this graph... Its not going to be easy... :/

I would like to create a mutation to upload images using lokka client. I am using express-graphql to implement my graphql express.

Searching possible implementation server side I found out this issue that explains one of the possible solutions using express middleware multer.

The explained example can be found here.

However I am not sure how to attach the file to the client side http request using lokka. Is there any example for this use case?

I can see that passing variables is not available for mutations (a workaround is to use send() function but it won't work with fragments).

Any plans on this? Can I somehow help?

Hi! I want to use fragment recurcively...

    export const folderFragment = client.createFragment(`
        fragment on Folder {
            id
            name
            description
            shortdescription
            image
            folders {
                ...${folderFragment}
            }
        }
    `);
    client.query(`{
        folders {
            ...${folderFragment}
        }
    }`);

but i get an error

error Error: There is no such fragment: undefined

Help me please..Thank you!

when importing lokka-transport-http, getting these errors:

WARNING in .//encoding/lib/iconv-loader.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
@ .//encoding/lib/iconv-loader.js 9:12-34

ERROR in .//iconv-lite/encodings/tables/gb18030-ranges.json
Module parse failed: C:\Users\黄硕\Project\toodu\node_modules\iconv-lite\encodings\tables\gb18030-ranges.json Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:9)
at Parser.pp$4.raise (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp.semicolon (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:581:61)
at Parser.pp$1.parseExpressionStatement (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:966:10)
at Parser.pp$1.parseStatement (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:730:24)
at Parser.pp$1.parseBlock (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:981:25)
at Parser.pp$1.parseStatement (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:709:33)
at Parser.pp$1.parseTopLevel (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:638:25)
at Parser.parse (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:516:17)
at Object.parse (C:\Users\黄硕\Project\toodu\node_modules\acorn\dist\acorn.js:3098:39)
@ .//iconv-lite/encodings/dbcs-data.js 99:37-76

Would be nice to use lokka/transport via CDN. cdnjs.com

We noticed that after adding lokka and lokka-transport-http, our production build increased from ~75kb to ~500kb. I suspect it's the babel-runtime dependency.

It's pretty important to keep the error inside the cache rather than cleaning it right away.
Only clean it once it updated.

First of all, thank you for the great work so far.
I just wanted to ask how close the project is to this goal? Any plans on how to do this? I would really like to see this happening soon.
I have some time on my hands and am willing to contribute just want to hear your stand on how this should be implemented, or open a discussion if there are no plans yet.

How would one use this client with a server using modern GraphQL authorization techniques? This requires the ability to send custom headers (token header) with all requests, but I do not see a way of sending headers with Lokka queries/mutations

userList: [ ${data.user.map((a) =>{+ a.value +})} ]

Also in a.value contained object

In the end, I want to get something like this
userList: [{ name: "1111", surname: "11111" },{ name: "1111", surname: "11111" }]

Hi,

I am very interested in this project, as I don't like Relay simply because it is tied to React.

I am contemplating using your gem of a package with vuex. https://github.com/vuejs/vuex

Though, I have two concerns. If I understand correctly, lokka doesn't yet manage any kind of store locally and you mention caching and validation. I would assume that means you do plan to add a client-side store(age) capability later? Could I feasibly use the vuex store to make the two work together?

Being lazy and not looking into the code, but does lokka support the introspection feature of GraphQL? (didn't see the docs mentioning it).

And, last question (which might show my lack of JS knowledge) will lokka (or does it now) support the ability to "collect" queries in a set of components, similar to how Relay does it with React components?

Thanks for any support in advance!

Scott

Hi,

Is it possible to cancel a request once it is sent?

Thanks,
Jerome

I have no problems with json mutations using react-apollo. But trying to use lokka no matter what I try I get the following error:

Error: GraphQL Error: Argument 'prices' expected type 'Json' but got: [object, Object]. Reason: Not valid JSON (line 5, column 28):
            prices: [object Object]

Here's the code:

const test = {
    test: 'value'
}

client.mutate(`{
        market: updateMarket(
            id: "cj60pwi9v6rh201942t6fq6h7",
            name: "TEST update5",
            prices: ${test}
        ) {
            name
        }
    }`)
        .then((response) => {
            console.log(`RESPONSE: ${JSON.stringify(response)}`)
        })
        .catch(e => console.log(e))

I've tried to stringify it. import it from an actual .json file, stringify then parse it. Putting quotes around it, various types of json data, including arrays. Putting it directly in the `` instead of using a variable.

If I put in e.g. [2] it will say ...but got: [2] instead of [object object] but if I try anything that isn't an array, it will say [object object] (which isn't even what I'm trying to pass)...

I've tried to change the type to an integer and string on graph.cool and changing the variable to a matching type and it works completely fine. It will also change the name just fine if I remove the line with prices.

But I cannot get lokka to update any json... What am I missing here?

Hey there,
First of all, thank you for your good job developing this lib!

I'm trying to develop a new transport for a specific need and I found a strange implementation:

here in index.js:23

send(rawQuery, vars) {
  if (!rawQuery) {
    throw new Error('rawQuery is required!');
  }

  return this._transport.send(rawQuery, vars);
}

Then here in transport.js:3

send(rawQuery, variables, operationName) {
  throw new Error('not implemented!');
  // return new Promise();
}

1. So, how operationName is passed through query->send methods in the Lokka class?

2. For going further: what do you think about:

query(query, vars, ...args) {
 [...]
  return this.send(queryWithFragments, vars, ...args);
}
send(rawQuery, vars, ...args) {
 [...]
  return this._transport.send(rawQuery, vars, ...args);
}

This way you can easily allow transport to communicate with the external world?

Thank you in advance, cheers!

So I currently have an issue, or rather a feature request. I am beginning to have to work with queries with optional arguments that may not be provided in certain instances, but having created the query string, it isn't very flexible to remove arguments dynamically. Is there any proposed query builder tool to be used? Or could this be added to Lokka? I believe it would be a useful feature, given that scenarios where dynamically adding arguments would occur in a lot of projects.

I would like to try out lokka in my SPA built using knockout and AMD (require) on the client side and ASP.Net on the server side. I use bower to install new libraries.

I was unable to find a bower package for lokka. Please suggest how to include and use it in such a situation.

Thanks

Don't see this mentioned anywhere...

If the graphql response contains errors, will it the client.query() promise reject? Or do I need to check for it on result within then?

Hi,

Would it possible to do GraphQL queries within components, like it is possible with Relay and React components? If it isn't possible, what would need to happen (at a high level) to make it possible?

Scott

It looks like the link from example http://graphql-swapi.parseapp.com/ is dead.

The GraphQL spec allows for 3 top level keys: data, errors and extensions.

Is there a way to read the value of the extensions entry?

After correcting the current SWAPI URI I get Error: Invalid status code: 405

import { Lokka } from 'lokka';
import { Transport } from 'lokka-transport-http';

const client = new Lokka({
transport: new Transport('http://graphql.org/swapi-graphql/')
});

client.query({ allFilms { films { title } } }).then(result => {
console.log(result.allFilms);
});

I followed the README to set the lokka client:

    var Lokka = require('lokka').Lokka;
    var Transport = require('lokka-transport-http').Transport;
    var client = new Lokka({
        transport: new Transport('http://graphql-swapi.parseapp.com/')
    }); 

    var query = `
{
  allFilms {
    films {
      title
      characterConnection {
        characters {
          name
          starshipConnection{
            starships{
              name
            }
          }
          filmConnection{
            films{
              title
            }
          }
          vehicleConnection{
            vehicles{
              name
            }
          }
        }
      }
    }
  }
} `
    client.query(query).then(
        function(result){
            if(result.data){
                client.cache.setItemPayload(query, vars, result);
                callback(null, result);
             }
             else{
                callback(result);
             }
        },
        function(error){
            callback(error, null);
        }
    )

However, when I tried to run my app, it stills gave me CORS error:
Fetch API cannot load http://graphql-swapi.parseapp.com/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 405. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Can any one help me to solve this issue?

Thanks in advance.

Is it possible to configure Lokka to retry upon failed connections? The built-in retries and timeouts on the relay network layer are quite handy, wasn't sure if that was possible with Lokka.

I'm thinking about using lokka with redux. In that case, I'd like redux to hold the cache in a typical app global state tree. In this case, lokka's management of the cache state is redundant with what someone would build with redux. It would be nice to move the caching that lokka does into a separate npm module. That way, one could swap in different cache management plugins, depending on how they want to manage the cache, where a plugin handles cache management via writing event listeners on lokka graphql query lifecycle events. Thoughts?

How to use websocket

Hi guys! Thanks for a nice lib!

You have a nice id generation for fragments in place. However, on our project, we already have a fragment naming scheme. Could you kindly use the fragment name if provided via standard GraphQL syntax fragment Name on Type ...?

I can send a PR for that if you are willing to support it.

The roadmap in the README states a few upcoming features but the whole project hasn't been updated for several months! Is it still the plan to implement these features or is the whole project discontinued? If so, would you mind adding a deprecation note?

Sorry for newbie question , I'm trying use Lokka in my project here is how i managed to get data from GraphQl , is there any simple way i can cache results for a fixed period of time ( server side ) so when ever I'm using client.query Lokka gets data from cache instead of transport !?

var Lokka = require('lokka').Lokka;
var Transport = require('lokka-transport-http').Transport;

var client = new Lokka({
  transport: new Transport('http://graphql-swapi.parseapp.com/')
});

function getFilms(req, res) {
    client.query(querym).then(function(result) {
        res.render('index', { movies: result });
    }).catch(function(err) {
        console.log(err.message);
    })
}

router.get('/', function(req, res) {
    getFilms(req ,res);
});

I recently tried using Lokka, and it works great (or at least it did once I solved the Webpack JSON loader problem). Thanks for making it!

However I do have a warning on the page which, while it isn't hurting anything, does seem concerning:

webpack-dev-server.js:1 ./~/encoding/lib/iconv-loader.js
Critical dependencies:
9:12-34 the request of a dependency is an expression
@ ./~/encoding/lib/iconv-loader.js 9:12-34

It has a stack trace of:

warnings	@	client?cd17:68
sock.onmessage	@	socket.js:37
EventTarget.dispatchEvent	@	eventtarget.js:51
(anonymous function)	@	main.js:274
SockJS._transportMessage	@	main.js:272
EventEmitter.emit	@	emitter.js:50
WebSocketTransport.ws.onmessage	@	websocket.js:35

Do you have any idea what might be causing this, and/or how I might resolve it?

It would be great if lokka would automatically batch queries and mutations. This can either be part of lokka or we can create buffered versions of lokka transports.

why do you have _ on this line : https://github.com/kadirahq/lokka/blob/master/index.js#L126
with that we dont get invalid query response ! once that _ is removed we get the response

Can the method be updated !

Thanks !

hi,

I using lokka in client products, lokka really awesome and easier than Relay, but i have trouble about cache update. Lokka trigger my watchHandler even data not change

const query = `
  {
    posts {
      _id,
      title
    }
  }
`;
const watchHandler = (err, payload) => {
  if (err) {
    console.error(err.message);
    return;
  }

  console.log(payload);
};
const stop = client.watchQuery(query, '{}', watchHandler);

setInterval(function() {
  console.log('refetching posts');
  client.refetchQuery(query, '{}');
}, 2000);

Can we check diff payloads in func setItemPayload before update new payload and trigger callbacks?