https://embedded-workflow-builder.netlify.app/assets/js/a8b595b9.58712ad8.js

1"use strict";(self.webpackChunkembedded_workflow_builder_docs=self.webpackChunkembedded_workflow_builder_docs||[]).push([["6287"],{5254(e,n,t){t.r(n),t.d(n,{metadata:()=>s,default:()=>h,frontMatter:()=>i,contentTitle:()=>a,toc:()=>c,assets:()=>d});var s=JSON.parse('{"id":"http-requests","title":"HTTP Requests","description":"If you\'d like to send data to an app that doesn\'t have a built-in connector, use the generic HTTP connector","source":"@site/docs/http-requests.md","sourceDirName":".","slug":"/http-requests","permalink":"/http-requests","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"HTTP Requests","description":"If you\'d like to send data to an app that doesn\'t have a built-in connector, use the generic HTTP connector"},"sidebar":"docs","previous":{"title":"Error Handling","permalink":"/error-handling"},"next":{"title":"Custom Code","permalink":"/custom-code"}}'),r=t(74848),o=t(28453);let i={title:"HTTP Requests",description:"If you'd like to send data to an app that doesn't have a built-in connector, use the generic HTTP connector"},a,d={},c=[{value:"HTTP verbs",id:"http-verbs",level:2},{value:"Authenticating HTTP requests",id:"authenticating-http-requests",level:2},{value:"Sending data to an API using the HTTP connector",id:"sending-data-to-an-api-using-the-http-connector",level:2},{value:"Sending JSON data",id:"sending-json-data",level:3},{value:"Sending non-JSON data",id:"sending-non-json-data",level:3},{value:"Sending form data",id:"sending-form-data",level:3},{value:"Sending GraphQL requests",id:"sending-graphql-requests",level:3},{value:"HTTP headers",id:"http-headers",level:2},{value:"Query parameters",id:"query-parameters",level:2},{value:"HTTP responses",id:"http-responses",level:2},{value:"JSON responses",id:"json-responses",level:3},{value:"Other text responses",id:"other-text-responses",level:3},{value:"Binary file responses",id:"binary-file-responses",level:3}];function l(e){let n={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:["Connectors are the building blocks of your Workflow and allow you to connect to third-party applications and services.\nIf you want to send data to an application that doesn't have a built-in connector, you can use the generic ",(0,r.jsx)(n.a,{href:"/connectors/http",children:"HTTP Connector"})," to make HTTP requests to that application's API."]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Tip: Use raw request actions for built-in connectors"})}),"\n",(0,r.jsxs)(n.p,{children:['If you are integrating with an application that has a built-in connector, but you need to access an endpoint that does not have a dedicated action, you can generally use the connector\'s "Raw Request" action to send an authenticated request to that application.\nMost built-in connectors contain a "Raw Request" action, like ',(0,r.jsx)(n.a,{href:"/connectors/slack#rawrequest",children:"Slack"}),", ",(0,r.jsx)(n.a,{href:"/connectors/hubspot#rawrequest",children:"Hubspot"}),", etc."]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"http-verbs",children:"HTTP verbs"}),"\n",(0,r.jsx)(n.p,{children:"HTTP requests can use different HTTP verbs to indicate the type of action being performed. The most common verbs are:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"GET"}),": Retrieve data from the server."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"POST"}),": Send data to the server, often creating a new resource."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"PUT"}),": Update an existing resource on the server."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"PATCH"}),": Partially update an existing resource on the server."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"DELETE"}),": Remove a resource from the server."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Generally, you will use ",(0,r.jsx)(n.code,{children:"GET"})," for retrieving data and ",(0,r.jsx)(n.code,{children:"POST"})," for sending data to an API. However, the specific verb you use will depend on the API's design and the action you want to perform."]}),"\n",(0,r.jsxs)(n.p,{children:["To add an HTTP request to your workflow, search for the ",(0,r.jsx)(n.a,{href:"/connectors/http",children:"HTTP"})," connector and then select the HTTP verb you want to use."]}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.img,{alt:"Add http connector step",src:t(54795).A+"",width:"400",height:"591"})}),"\n",(0,r.jsx)(n.h2,{id:"authenticating-http-requests",children:"Authenticating HTTP requests"}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"/connectors/http#connections",children:"HTTP connector"})," supports several authentication methods to securely connect to APIs (like OAuth 2.0, API key bearer token, basic auth, etc).\nIf you click ",(0,r.jsx)(n.strong,{children:"+ Add connection"})," to your HTTP request step, you can select the authentication method you want to use."]}),"\n",(0,r.jsxs)(n.p,{children:["If the API you're connecting to requires custom authentication (for example, it requires an ",(0,r.jsx)(n.code,{children:"x-acme-api-key"})," header), you can provide that authentication header as a ",(0,r.jsx)(n.strong,{children:"Header"})," input - specify the name of the header as the ",(0,r.jsx)(n.strong,{children:"Key"}),", and your API key as the ",(0,r.jsx)(n.strong,{children:"Value"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"sending-data-to-an-api-using-the-http-connector",children:"Sending data to an API using the HTTP connector"}),"\n",(0,r.jsxs)(n.p,{children:["Some HTTP verbs (",(0,r.jsx)(n.code,{children:"POST"}),", ",(0,r.jsx)(n.code,{children:"PUT"}),", ",(0,r.jsx)(n.code,{children:"PATCH"}),") allow you to send a request body to an API, which is often required when creating or updating resources."]}),"\n",(0,r.jsx)(n.p,{children:"The HTTP connector supports sending data in various formats, including JSON, XML, form data, and GraphQL requests.\nBelow are examples of how to send data in these formats."}),"\n",(0,r.jsx)(n.h3,{id:"sending-json-data",children:"Sending JSON data"}),"\n",(0,r.jsxs)(n.p,{children:["JSON (JavaScript Object Notation) is the most widely used data format for interacting with APIs.\nTo send JSON data in an HTTP request, first generate a JavaScript or JSON payload in a previous step.\nIf you are adept at coding, you can use the ",(0,r.jsx)(n.a,{href:"/custom-code",children:"Code"})," connector to generate a JavaScript object."]}),"\n",(0,r.jsxs)(n.blockquote,{children:["\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.strong,{children:"Tip: Create objects using the Collection Tools connector"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.a,{href:"/connectors/collection-tools#createobject",children:"Create Object"})," action is a great way to create a JSON object from scratch."]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Feed the results of your previous step into the ",(0,r.jsx)(n.strong,{children:"Body"})," input of your HTTP request step."]}),"\n",(0,r.jsxs)(n.p,{children:["If your previous step returned a JavaScript object, you can reference it directly in the ",(0,r.jsx)(n.strong,{children:"Body"})," input.\nThe action will automatically include the necessary ",(0,r.jsx)(n.code,{children:"Content-Type: application/json"})," header for you."]}),"\n",(0,r.jsxs)(n.p,{children:["If your previous step returned a serialized JSON string, you can pass that string directly into the ",(0,r.jsx)(n.strong,{children:"Body"})," input.\nBe sure to set the ",(0,r.jsx)(n.strong,{children:"Content-Type"})," header to ",(0,r.jsx)(n.code,{children:"application/json"})," in the ",(0,r.jsx)(n.strong,{children:"Header"})," input, as the connector will not assume the stringified body is JSON by default."]}),"\n",(0,r.jsx)(n.h3,{id:"sending-non-json-data",children:"Sending non-JSON data"}),"\n",(0,r.jsxs)(n.p,{children:["If you need to send data in another stringified format, like XML or CSV, you can do so by passing the stringified data into the ",(0,r.jsx)(n.strong,{children:"Body"})," input of your HTTP request step.\nMake sure to set the ",(0,r.jsx)(n.strong,{children:"Content-Type"})," header to the appropriate value for the format you are sending (e.g., ",(0,r.jsx)(n.code,{children:"application/xml"})," for XML data)."]}),"\n",(0,r.jsx)(n.h3,{id:"sending-form-data",children:"Sending form data"}),"\n",(0,r.jsxs)(n.p,{children:["Form data is often used when submitting HTML forms or when an API expects data in a key-value format.\nIt's especially helpful when sending multiple fields or files in a single request.\nFor example, you can post a form with text fields and file uploads in a single request using the ",(0,r.jsx)(n.code,{children:"multipart/form-data"})," content type."]}),"\n",(0,r.jsxs)(n.p,{children:["To send form data in an HTTP request, select the ",(0,r.jsx)(n.a,{href:"/connectors/http#httppostformdata",children:"POST/PUT Form Data Request"})," action.\nIf you are sending multiple text fields, you can send them using the ",(0,r.jsx)(n.strong,{children:"Form Data"})," input.\nIf you are sending one or more files within the request, you can use the ",(0,r.jsx)(n.strong,{children:"File Data"})," input to specify the content of the files you want to upload, and the ",(0,r.jsx)(n.strong,{children:"File Data File Names"})," input to specify the names of the files being uploaded."]}),"\n",(0,r.jsxs)(n.p,{children:["For example, you may give the ",(0,r.jsx)(n.strong,{children:"File Data"})," input a key of ",(0,r.jsx)(n.code,{children:"myFile"})," and value of ",(0,r.jsx)(n.code,{children:"Hello, World!"}),".\nThen, in the ",(0,r.jsx)(n.strong,{children:"File Data File Names"})," input, you would specify a key of ",(0,r.jsx)(n.code,{children:"myFile"})," and value of ",(0,r.jsx)(n.code,{children:"myFile.txt"}),".\nThat would add a file named ",(0,r.jsx)(n.code,{children:"myFile.txt"})," with the content ",(0,r.jsx)(n.code,{children:"Hello, World!"})," to the form data request."]}),"\n",(0,r.jsx)(n.h3,{id:"sending-graphql-requests",children:"Sending GraphQL requests"}),"\n",(0,r.jsxs)(n.p,{children:["While ",(0,r.jsx)(n.a,{href:"https://graphql.org/",children:"GraphQL"}

1)," requests are, at their core, HTTP POST requests of JSON data, it's often helpful to serialize the GraphQL query and variables automatically.\nUse the generic ",(0,r.jsx)(n.a,{href:"/connectors/graphql",children:"GraphQL"})," connector to send GraphQL requests as you would HTTP requests."]}),"\n",(0,r.jsxs)(n.p,{children:["Your query can contain GraphQL ",(0,r.jsx)(n.a,{href:"https://graphql.org/learn/queries/#variables",children:"variables"}),", which are passed in the ",(0,r.jsx)(n.strong,{children:"Variables"})," input."]}),"\n",(0,r.jsx)(n.p,{children:"For example, if you have a GraphQL query that looks like this:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-graphql",children:"query getUser($myId: ID!) {\n  user(id: $myId) {\n    id\n    name\n    email\n  }\n}\n"})}),"\n",(0,r.jsxs)(n.p,{children:["You can specify a ",(0,r.jsx)(n.strong,{children:"Variable"})," input with a key of ",(0,r.jsx)(n.code,{children:"myId"})," (without the ",(0,r.jsx)(n.code,{children:"$"}),") and a value to be substituted into the query."]}),"\n",(0,r.jsx)(n.h2,{id:"http-headers",children:"HTTP headers"}),"\n",(0,r.jsxs)(n.p,{children:["The API you connect to may require specific HTTP headers to be included in your request.\nYou can add these headers in the ",(0,r.jsx)(n.strong,{children:"Header"})," input of your HTTP request step."]}),"\n",(0,r.jsx)(n.p,{children:"Common headers include:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"Authorization"}),": Used for authentication, such as a bearer token or API key."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"Content-Type"}),": Specifies the media type of the resource being sent (e.g., ",(0,r.jsx)(n.code,{children:"application/json"}),", ",(0,r.jsx)(n.code,{children:"application/xml"}),", etc.). The HTTP connector defaults to ",(0,r.jsx)(n.code,{children:"application/x-www-form-urlencoded"})," unless a ",(0,r.jsx)(n.a,{href:"#sending-json-data",children:"JavaScript"})," data body is provided, in which case it defaults to ",(0,r.jsx)(n.code,{children:"application/json"}),"."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"Accept"}),": Indicates the media type(s) that the client is willing to receive from the server (e.g., ",(0,r.jsx)(n.code,{children:"application/json"}),", ",(0,r.jsx)(n.code,{children:"application/xml"}),", etc.). The HTTP connector defaults to ",(0,r.jsx)(n.code,{children:'"application/json, text/plain, */*"'})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"User-Agent"}),": Identifies the client software making the request. By default the HTTP connector sends ",(0,r.jsx)(n.code,{children:"axios/{version}"}),", but this can be overridden as necessary."]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"query-parameters",children:"Query parameters"}),"\n",(0,r.jsxs)(n.p,{children:["Query parameters are often used in ",(0,r.jsx)(n.code,{children:"GET"})," requests to filter or modify the data being retrieved (though they can be used by other HTTP verbs as well).\nThey're the key-value pairs appended to the URL after a ",(0,r.jsx)(n.code,{children:"?"}),", like this: ",(0,r.jsx)(n.code,{children:"https://api.example.com/data?key1=value1&key2=value2"}),"."]}),"\n",(0,r.jsxs)(n.p,{children:["You can add query parameters to your HTTP request by using the ",(0,r.jsx)(n.strong,{children:"Query Parameter"})," input."]}),"\n",(0,r.jsx)(n.h2,{id:"http-responses",children:"HTTP responses"}),"\n",(0,r.jsx)(n.p,{children:"Like an HTTP request, an API can respond with different types of data.\nThe HTTP connector can handle various response formats, including JSON, XML, plain text, and binary files."}),"\n",(0,r.jsx)(n.h3,{id:"json-responses",children:"JSON responses"}),"\n",(0,r.jsxs)(n.p,{children:["If you expect a JSON response, select ",(0,r.jsx)(n.strong,{children:"JSON"})," as the ",(0,r.jsx)(n.strong,{children:"Response Type"})," in your HTTP request step.\nThe HTTP step will automatically parse the JSON response and make it available in the result of the step."]}),"\n",(0,r.jsx)(n.h3,{id:"other-text-responses",children:"Other text responses"}),"\n",(0,r.jsxs)(n.p,{children:["If you expect a different text-based response type (like XML or CSV), select ",(0,r.jsx)(n.strong,{children:"Text"})," as the ",(0,r.jsx)(n.strong,{children:"Response Type"})," and then feed the result of the step into an action like ",(0,r.jsx)(n.a,{href:"/connectors/change-data-format#de

1serializefromxml",children:"Deserialize XML"})," or ",(0,r.jsx)(n.a,{href:"/connectors/change-data-format#deserializefromcsv",children:"Deserialize CSV"})," to parse the response."]}),"\n",(0,r.jsx)(n.h3,{id:"binary-file-responses",children:"Binary file responses"}),"\n",(0,r.jsxs)(n.p,{children:["If you expect a binary file response (like an image or PDF), select ",(0,r.jsx)(n.strong,{children:"Binary File"})," as the ",(0,r.jsx)(n.strong,{children:"Response Type"}),".\nBehind the scenes, the HTTP connector will download the file and return the file's contents as a JavaScript array buffer, formatted like this:"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-json",children:'{\n  "data": <ArrayBuffer>,\n  "contentType": "image/png",\n}\n'})}),"\n",(0,r.jsxs)(n.p,{children:["You can pass the results of the HTTP request step into any other input that expects a file, like an SFTP ",(0,r.jsx)(n.a,{href:"/connectors/sftp#writefile",children:"Write File"})," or Salesforce ",(0,r.jsx)(n.a,{href:"/connectors/salesforce#addattachment",children:"Add Attachment"})," step."]})]})}function h(e={}){let{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},54795(e,n,t){t.d(n,{A:()=>s});let s=t.p+"assets/images/add-http-step-dccf4fb4e480953e36bfaf4082f56932.png"},28453(e,n,t){t.d(n,{R:()=>i,x:()=>a});var s=t(96540);let r={},o=s.createContext(r);function i(e){let n=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:i(e.components),s.createElement(o.Provider,{value:n},e.children)}}}]);