How Apps framework client.request works

Hi Bonaliza! Could you let me know what you're trying to do here? As far as I am aware, ZAF is not available in our help center, but I'd like to understand your use-case first.

Hi,

I added the below on document_head.hbs but I'm still not able to use it. I think it's not loading the ZAFClient properly. Can you please point out what I did wrong?

<script type="text/javascript" src="https://static.zdassets.com/zendesk_app_framework_sdk/2/zaf_sdk.min.js"></script>

Yes, everything works fine outside of Zendesk or with a non-secure parameter.

However, we followed one of your examples and simply replaced the "method" attribute with "type" in our code snippet.

...and it is now working! (also, thanks for the side note :)

Hi Alex. Since it's the remote web site returning the error, the best place to start is there. I'd suggest looking there to see what it's receiving and repeating the same request in something such as Postman or cURL to see if the same request works in these other tools.

Secure settings also have a number of things that need to be set up to work. I'd cross-reference and compare your code against a couple of example apps to see if there may be anything missing (i.e. make sure you have the token setting specified as "secure" in manifest.json, make sure you have a domainWhitelist specified in manifest.json, etc).

Examples:

https://github.com/zendesk/demo_apps/tree/master/v2/support/secure_settings_sample_app

https://github.com/bryan-flynn-zd/examples/tree/master/demo_app_secure_settings

Hopefully one of the above points will help. If not, you will probably have to contact Zendesk Customer Support as there will probably be private account specific information needed to take this further.

One minor side note in your above snippet: you don't need the 'Accept" header since you have the "dataType" attribute set. 

I can't really wrap my head around the "data" attribute and the fact it is setting a body as query parameters. Is this the only way to send a body? My target endpoint returns a parsing error (400) only with client.request(), which we need to send a secure setting. It works fine with GET since there is no body.

var settings = {
method: 'PUT',
url: `url`,
contentType: 'application/json;charset=utf-8',
headers: {
"Accept": "application/json",
"Authorization": "Basic {{setting.token}}"
},
data: JSON.stringify({
Description: `${desc}`,
Owner: `${owner}`
}),
cors: false,
dataType: "json",
secure: true,
httpCompleteResponse: true
}

Ok, leaving this here in case someone else runs into the same issue.

The way I solved the request above is by using the `print` method from graphql package, and stringifying my query variables, like this:

import { print } from 'graphql/language/printer'
...
client.request({
    url: 'https://api.monday.com/v2/',
    headers: {
        "Authorization": "Bearer {{setting.token}}"
    },
    cors: false,
    secure: true,
    contentType: 'application/json',
    method: 'POST',
    data: {
        query: print(require('../graphql/MyBoardsQuery.gql')), // <== using gql to make it cleaner
        variables: JSON.stringify({ ids: [this.boardId] })
    })
}).then(results => {
    console.log("zd client request results", results)
}).catch(error => {
    console.log("zd client request error:", error)
})

Hi, I'm sorry if I'm posting this in the wrong place, I just can't find anywhere specific for my problem.. 

I'm trying to send a request to monday.com's GraphQL API but I'm getting a few different responses depending on the various settings I have tried.

Sometimes I get an empty responseText and statusText: "error", sometimes something like "Internal Proxy error", and sometimes, when the request does return a 200 response, I get "No query string was present".. I have tried a few different variations to my data parameter but nothing seems to work.. Is there a specific way of sending a GraphQL payload to client request, or am I missing some extra parameter in muy request?

Here's my request:

client.request({
    url: 'https://api.monday.com/v2/',
    headers: {
        "Authorization": "Bearer {{setting.token}}"
    },
    cors: false, // <== I have tried with cors: true and without cors param
    secure: true,
    contentType: 'application/json',
    method: 'POST',
    data: JSON.stringify({
        query: 'query {\n  boards {\n    id\n  }\n}'
    })
}).then(results => {
    console.log("zd client request results", results)
}).catch(error => {
    console.log("zd client request error:", error)
})

Hi Alex. client.request will not send x-csrf-token — this is a reserved header that Zendesk Support uses when managing requests. In fact, it's not something a client would typically set. It comes from the server, to be sent back by the client during normal communication though a browser-to-server communication. If you're going through a proxy, you are really approaching things from a different angle.

Hi Bryan, thanks for covering all the different options we have in Zendesk!

With a server that is not accepting cors, I am using the Method 3 and pass the following GET request header through client.request(): 'x-csrf-token': 'Fetch'. Unfortunately the header is not being sent at all.

Would you have any idea why this happens? I can see it when setting client.request to cors: true or using $.ajax, etc. but cannot use it since the server is not cors-compliant.

Thanks!