Is there any way to upload files via postman into a GraphQL API?

Question

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!

Answer 1

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 )

Answer 2

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)

Answer 3

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

Answer 4

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\"
        }
    }
}"'

Answer 5

Postman was unable to do this, but I found another one called Altair. See this blog that describes how to use it for file uploads. You can even see a glimpse of how it is done in the screenshot below:

Image taken from https://altairgraphql.dev/

Answer 6

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;
 }
}