Currently I'm using Altair to upload files (in my case it's just for images) to my GraphQL API. However, all my other routes are stored in postman and it'd be nice if I could use just one application - Postman - for everything.
In Altair I can simply select an image and store that as a variable that I put as the value for my GraphQL Upload field.
Does anyone know if Postman supports that (or a similiar) feature?
Thank you!
You can use Form-Data to do this.
Key: Operations (this is for the query / mutation )
{"query":"mutation updateAvatar($avatar:Upload!) {\n updateAvatar(avatar: $avatar)\n}"}
Key: map ( this is to map the files to your query / mutation )
{"0": ["variables.avatar"]}
Key: 0 ( upload your image/file etc )
varilables seems like a typo
POST body missing, invalid Content-Type, or JSON object has no keys. any idea on this?
Answer from @Brad Larson is correct. But contains a typo:
You should have {"0":["variables.file"]} instead of "[variables.file]"
(Sorry I don't have enough reputation to comment)
The above solution didn't work for me but helped as a base.
I've inspected other GraphQL server requests in my browser and tried emulating them.
This is how it works for me:
My server runs Django with Graphene, the difference may be there (?) I guess
profile_picture is not populating the query variables and query is not being passed to graphene/django. I have to use operations as in the other answer (but map is not populating the query variables either).
queryPostman was unable to do this, but I found another one called Altair. See this blog that describes how to use it for file uploads.
Image taken from https://altairgraphql.dev/
I ran into this issue using graphene-file-upload==1.2.2 as the upload handler and found it extremely complex to prepare the correct payload as the request included additional parameters to the upload file, so I hope this helps:
This is the curl equivalent request for reference:
curl --location --request POST '<REDACTED>/graphql' \
--header 'Authorization: Bearer <REDACTED>' \
--form '0=@"/home/user/Downloads/Five.pdf"' \
--form 'map="{\"0\": [\"variables.data.attachments\"]}"' \
--form 'operations="{
\"query\": \"mutation AddPOAttachments($data: AddProductAttachmentsInput!) { add_product_attachments(data: $data) { attachments { id url purpose file_info { name type size_in_bytes} __typename } __typename }}\",
\"variables\":
{
\"data\":
{
\"sku\": \"123456sku\",
\"attachments\": null,
\"purpose\": \"Test\"
}
}
}"'
you can use form-data for the same
you have add the below line to your graphql schema file
scalar Upload
type Mutation {
uploadFloorMap(floorMapImage: Upload!) : String
}
please add the below maven dependecies and modify your code to add new configuration
<dependency>
<groupId>com.graphql-java-kickstart</groupId>
<artifactId>graphql-java-servlet</artifactId>
<version>14.0.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.graphql-java/graphql-java-extended-scalars -->
<dependency>
<groupId>com.graphql-java</groupId>
<artifactId>graphql-java-extended-scalars</artifactId>
</dependency>
add configuration code
import graphql.kickstart.servlet.apollo.ApolloScalars;
import graphql.schema.GraphQLScalarType;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class GraphQLConfiguration {
@Bean
public GraphQLScalarType uploadScalarDefine() {
return ApolloScalars.Upload;
}
}
