Send files via Apollo Client and receive in Graphene Flask server - apollo-client

I'm using Graphene package in my Flask app (https://github.com/graphql-python/graphene) and graphene-file-upload (https://pypi.org/project/graphene-file-upload/). I need to receive a file through a mutation as bellow:
class Picture(graphene.Mutation):
class Arguments:
file = Upload(required=True)
numerical_id = graphene.Int()
def mutate(self, info, file):
... continues
class Mutations(graphene.ObjectType):
picture = Picture.Field()
But when I send the mutation via an Apollo client (https://www.apollographql.com/docs/react/) I'm receving this errors:
Unknown type "Upload". Perhaps you meant "Float"?
Cannot query field "picture" on type "Mutations".
Is there any workaround for it? Thank you in advance !

Did you import Upload from graphene_file_upload.scalars? You also need to make sure you fix the view function you hook up to your /graphql view

I spent a couple of hours trying to figure this out since the mutation worked fine via Postman but not when sent from the Frontend.
The problem was that the parent component was using a different ApolloProvider from the one I was expecting.

Related

Error while receiving image from postman to python Flask API: 400 Bad request

I have been trying to deploy a python predictive model using flask API however I am not able to receive the image request. It works fine when I test it using text but I think I am missing something when it comes to dealing with Images. I have uploaded the image to postman using the form-data and set the key to type 'file' and name 'image'.
This is the error on postman I am getting:
werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this
server could not understand.
KeyError: 'file'
In my flask code, I am using this line of code to receive the request:
imagefile = request.files['image']
Please help me figure this out. Thank you
I had a similar issue before. You can try to add this to your code:
from flask import Flask
#python3 -m pip install flask-cors
#installation command
from flask_cors import CORS
#You can specify the app variable's name CORS(your_app)
app = Flask(__name__)
CORS(app)
#app.route("/")
def helloWorld():
return "Hello, cross-origin-world!"
Full Documentation:https://flask-cors.readthedocs.io/en/latest/
Also if you are trying to use HTTPS just change it to HTTP.

How to test graphql + apollo server for upload file mutation using postman?

I using apollo server, and have this mutation :
mutation {
updateData(
file1: fileOne,
file2: fileTwo,
file3: fileThree,
payload: {
id: "7e3583b4-5673-48df-a3cf-44a4ec33f0e1"
}
){
isSuccess
error
data
}
}
I want to test it using postman, because i didnt find any clue test it using graphql playground.
I already find how to test graphql from postman, but it doesn't contains information about file upload. graphql postman
I have an idea from apollo-upload-client to post using multipart-formdata but it still fail.
please help how to test graphql with apollo server for upload file mutation using postman?
thanks
I need to understand about how file upload works in node js (because I use nodejs ini this case)
I install multer for file upload middleware using nodejs and expressjs, if you use other framework or programming language, just try adjust it
In postman I use formdata
you can find the good step by step here
Upload file graphql using postman

Unsure how to retrieve data from a custom endpoint?

Context to this post is I'm a java developer attempting to teach myself Ember. It isn't going well. I realize this question is pretty vague so I apologize, I'm not even sure what I should be asking...
I need to pull data into a model, i.e. via some sort of query, from a heroku json endpoint. In the application.js file, I have the following:
import DS from ‘ember-data’;
export default DS.JSONAPIAdapter.extend({
host: 'https://cag-brain.herokuapp.com'
});
Ideally I would like to pull this data into a user model, then display that data on a page as a sort of proof of concept. This unfortunately gets me nothing. Nor am I even sure I'm going about this correctly. Should I be doing something different than attempting to use Host Customization? Any guidance would be much appreciated!
There are different things involved for retrieving records via ember-data.
First of all you should define your models:
// app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string')
});
You should retrieve records in a model hook of a route.
// app\routes\posts.js
import Route from '#ember/routing/route';
export default Route.extend({
model() {
return this.get('store').findAll('post');
}
});
Then you should configure your api host and maybe a namespace. You included that step in your question:
// app/adapters/application.js
import DS from ‘ember-data’;
export default DS.JSONAPIAdapter.extend({
host: 'https://cag-brain.herokuapp.com'
});
If your api does not implement JSON Api specification you need to customize your serializer and adapter. Ember-data ships with a RESTAdapter/RestSerializer additionally to the default adapter and serializer which implements JSON Api spec. There is also one abstract adapter and serializer If you need to start from scratch. Before that I would definitely have a look if there is any community adapter/serializer fitting your needs.
To decouple api and client development and to speed up tests I would recommend ember-cli-mirage which allows you to mock your api.

Retrieving JSON from an external API with backbone

I'm new to backbone.js and I've read other solutions to similar problems but still can't get my example to work. I have a basic rails api that is returning some JSON from the url below and I am trying to access in through a backbone.js front end. Since they are one different servers I think I need to use a 'jsonp' request. I'm currently doing this by overriding the sync function in my backbone collection.
Api url:
http://guarded-wave-4073.herokuapp.com/api/v1/plans.json
sync: function(method, model, options) {
options.timeout = 10000;
options.dataType = 'jsonp';
options.url = 'http://guarded-wave-4073.herokuapp.com/api/v1/plans.json'
return Backbone.sync(method, model, options);
}
To test this I create a new 'plans' collection in my chrome console using "plans = new Plans()" and then "plans.fetch()" to try and get the JSON.
When I call plans.models afterwards I still have an empty array and the object that returns from plans.fetch() doesn't seem to have any json data included.
Any ideas where I'm going wrong?
I have had the same problem before. You should not have to override your sync method.
Taken from Stackoverflow Answer
"The JSONP technique uses a completely different mechanism for issuing HTTP requests to a server and acting on the response. It requires cooperating code in the client page and on the server. The server must have a URL that responds to HTTP "GET" requests with a block of JSON wrapped in a function call. Thus, you can't just do JSONP transactions to any old server; it must be a server that explicitly provides the functionality."
Are you sure your server abides to the above? Test with another compatible jsonp service (Twitter) to see if you receive results?
Have you tried overriding the fetch method as well?
You should add ?callback=? to your api url in order to enable jsonp

POST request in Windows phone

I am trying to get some data from the user and send it to my server for logging purposes. I was able to do it easily with jquery for my website. When I try to write a windows app for the same I am clueless as to how to post the data to my server.
So far I have fetched the data from the user and I am trying to use OpenWriteAsync function of webclient to send it to my server. I understand how OpenWriteAsync function works but I am not able to figure out how to send my own data.
My php script in my server will get values with name "FILENAME" and "FTIME" like,
$fname = $_POST['FILENAME'];
$time = $_POST['FTIME'];
So I have got this information from the user in two different string variables in c# inside my app. Now how do I send this to my server so that my php script gets this value and logs it inside my server.
I hope I am clear.
Take a look at UploadData method.
The way you use it something like this:
UploadData("http://abc.com","POST", "data in byte array");
Note: you need to convert data to byte array
Reference: http://msdn.microsoft.com/en-us/library/ktfa4fek(v=VS.90).aspx
You can do this by using the ContentType property in the HTTPWebRequest object.

Resources