Is it possible to create array of images using GraphQL API?

default discord avatar
fabcodingzest2 years ago
1 1

Hey,

In my project, I have created a Products collection that has an array of product variants and each product variant have a field of an array which have a relation to image collection. Everything works fine for payload Admin UI but I am not sure how can I create those images when creating a Product through GraphQL API. I found out about apollo-link-rest but couldn't figure out how to use it inside createProduct Mutation for images field(that's an array since multiple file upload isn't supported for upload yet).

Is what I am trying to achieve possible with payload GraphQL API?

Are there any plans for third party upload plugins that can support multiple uploads, with GraphQL API if possible?

  • Selected Answer
    discord user avatar
    jmikrut
    2 years ago

    @fabcodingzest you are awesome! You are doing some serious learning and skill development. I'm blown away.

    Sooo, the long and short of file uploading in GraphQL is that it's hard, and fairly nonsensical to do given the nature of GraphQL.

    For that reason, Payload does not support uploading files through GraphQL at this time.

    So, being that file uploads are actually just documents in a collection, to upload multiple files you'd need to do something like the following:

    1. For each file you need to upload, make a REST call to your collection's create endpoint, uploading files and creating documents accordingly
    2. Store the IDs that come back from each one of the successfully created documents in your collection
    3. Update your Product (you could use REST, GraphQL, or local API at this point) with the IDs that you've retrieved from the successfully created uploads

    Does that make sense? / Answer your question?

    2 replies
  • discord user avatar
    jmikrut
    2 years ago

    Oh, another thought I just came across is that if this is a common application feature of yours, you could open up a custom REST endpoint in your Express server that is specifically set up to do all of this work on the backend.

    Maybe making an Express route like this:

    /create-product-with-images

    Then that route could accept multiple images, product data, etc. and then do it all in one fell swoop using Payload's Local API.

    Thoughts?

  • default discord avatar
    fabcodingzest2 years ago

    Hey,

    So I will try to implement what you suggested first with the express route as it will be easier and then try if I can do that upload image for each variant from the front end (which might be easier to update those too) and use results to send data for createProduct Mutation.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.