POST method not allowed

Highlighted
Excursionist
28 1 2

 

Hello! I try to use new Shopify's media API but when I send mutation query got 405 error code (method not allowed)

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: `https://e2a6c485.ngrok.io/admin/api/unstable/graphql`,
  fetchOptions: {
    credentials: "include",
    useGETForQueries: true
  },
  request: operation => {
    operation.setContext({
      headers: {
        "X-Shopify-Access-Token": Cookies.get("accessToken"),
        "User-Agent": `shopify-app-node ${process.env.npm_package_version} | Shopify App CLI`
      }
    });
  }
});

const variables = {
  id: "gid://shopify/Product/4181879717973",
  media: [
    {
      originalSource:
        "https://animatron-test-library.s3.amazonaws.com/templates/5024dc5bd6049065f9023e15/facebook_square_hd720.mp4",
      alt: "video alt ",
      mediaContentType: "VIDEO"
    }
  ]
};

const ADD_PRODUCT_VIDEO = gql`
  mutation createProductMedia($id: ID!, $media: [CreateMediaInput!]!) {
    productCreateMedia(productId: $id, media: $media) {
      media {
        mediaErrors {
          code
          details
          message
        }
      }
      product {
        id
      }
      userErrors {
        field
        message
      }
    }
  }
`;

export const Component = () => {

  useEffect(() => {
    client.mutate({
      mutation: ADD_PRODUCT_VIDEO,
      variables
    });
  }, []);

}

Please help me to solve this issue. Thanks.

 

0 Likes
Shopify Staff
Shopify Staff
3 1 0

Hi Viktor10,

I work on the the team building this feature. In this case, the issue was that our documentation for the originalSource parameter wasn't specific enough. You can pass in image URL's or YouTube URL's, but not any video URL like the S3 hosted video you passed. For videos not hosted on YouTube you have to do a three step process that involves getting a staged URL from Shopify, uploading the mp4/mov there, and then passing that URL into the createProductMedia mutation. The video will be hosted on the Shopify platform and CDN. You can read more about this process here.

I'll make sure our documentation is more specific about what the parameter accepts.

Jon

0 Likes
Excursionist
28 1 2

As I understand I have to make: 

1) get stage URL (using stagedUploadsCreate mutation)

2) uploading the mp4/mov ( )

3) passing that URL into the createProductMedia

 

May I use https://shopify-video-production-core-originals.s3.amazonaws.com/ to upload a video? 

in doc describe upload by this command:

curl -v \
  -F "bucket=shopify-video-production-core-originals" \
  -F "key=c/o/v/7827ebe111a24a09869ec90f3412768f.mp4" \
  -F "policy=eyJjb25kaXRpb25zIjpbWyJlcSIsIiRidWNrZXQiLCJzaG9waWZ5LXZpZGVvLXByb2R1Y3Rpb24tY29yZS1vcmlnaW5hbHMiXSxbImVxIiwiJGtleSIsImMvby92Lzc4MjdlYmUxMTFhMjRhMDk4NjllYzkwZjM0MTI3NjhmLm1wNCJdLFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDg5OTc2NSw4OTk3NjVdLFsiZXEiLCIkY2FjaGUtY29udHJvbCIsInB1YmxpYywgbWF4LWFnZT0zMTUzNjAwMCJdLFsiZXEiLCIkeC1hbXotY3JlZGVudGlhbCIsIkFLSUFZT0k1S1o2MkpRQ1c2M0xVLzIwMTkwOTE3L3VzLWVhc3QtMS9zMy9hd3M0X3JlcXVlc3QiXSxbImVxIiwiJHgtYW16LWFsZ29yaXRobSIsIkFXUzQtSE1BQy1TSEEyNTYiXSxbImVxIiwiJHgtYW16LWRhdGUiLCIyMDE5MDkxN1QyMDQ4MzhaIl1dLCJleHBpcmF0aW9uIjoiMjAxOS0wOS0xN1QyMTo0ODozOFoifQ==" \
  -F "cache-control=public, max-age=31536000" \
  -F "x-amz-signature=16bd494f09d3739f428777e44b2a1f8de96f9545b83db4a58cf027503833c9fc" \
  -F "x-amz-algorithm=AWS4-HMAC-SHA256" \
  -F "x-amz-date=20190917T204838Z"
  -F "file=@/Users/shopifyemployee/watches_comparison.mp4" \
  "https://shopify-video-production-core-originals.s3.amazonaws.com/"

 

 the question is how to upload from my s3 to Shopify s3?   

 

thanks!

 

0 Likes
Shopify Staff
Shopify Staff
3 1 0

You have the steps correct. Upload to whatever target given to you by the response to the stagedUploadsCreate mutation (https://shopify-video-production-core-originals.s3.amazonaws.com/ in the example). Same with the other parameters, use what was provided in the response.

As far as transferring a video directly from your S3 bucket to Shopify's S3 target, I'm not sure if that is possible. Curl requires the file to be local, but it's just an example tool to complete the HTTP multi-part form POST. You can't provide a URL for form POSTs, the data is encoded as a part of the form.

0 Likes