diff --git a/APIs/graphql.md b/APIs/graphql.md new file mode 100644 index 0000000..cbb3f48 --- /dev/null +++ b/APIs/graphql.md @@ -0,0 +1,47 @@ +# GraphQL + +Use Case (Social Media): GraphQL is particularly beneficial in scenarios like social media, where large-scale data is involved. It allows clients to request only the specific data they need, leading to quicker response times (1-2 seconds). +Efficiency: GraphQL enables clients to specify the exact data they want in a single query, reducing over-fetching and under-fetching. + +```yaml + inputs: + - GQLInput + uri: ${env['graphQL_URL_'ensemble.storage]} + method: POST + headers: + Authorization: Bearer ${ensemble.storage.token.exp_token} + ContentType: "application/json" + body: + "query": |- + mutation UpdatePost($input: CreateUpdatePostInput!) {} + "variables": ${GQLInput} +``` + +HTTP Method: +GraphQL APIs typically use the HTTP POST method. In your example, the method is specified as POST. +```yaml +method: POST +``` + +URI (Uniform Resource Identifier): +The URI is typically a single endpoint for GraphQL APIs. In your example, the URI is parameterized with an environment variable (assuming graphQL_URL_ensemble.storage is provided at runtime). +```yaml +uri: ${env['graphQL_URL_'ensemble.storage]} +``` + +Headers: +GraphQL API requests often include headers for authentication or specifying the content type. In your example, you have headers for Authorization (Bearer token) and ContentType (set to "application/json"). +```yaml +headers: + Authorization: Bearer ${ensemble.storage.token.exp_token} + ContentType: "application/json" +``` + +Request Body: +GraphQL API requests use a structured query language in the request body. The key part here is the "query" field, where you define the GraphQL query or mutation. In your example, you are using a mutation called "UpdatePost," and the query is parameterized with ${GQLInput}. +```yaml +body: + "query": |- + mutation UpdatePost($input: CreateUpdatePostInput!) {} + "variables": ${GQLInput} +``` \ No newline at end of file diff --git a/APIs/headers.md b/APIs/headers.md new file mode 100644 index 0000000..2378f9c --- /dev/null +++ b/APIs/headers.md @@ -0,0 +1,33 @@ +# How to set headers including authorization header + +Setting headers, including the crucial "Authorization" header, is a key aspect of enhancing security and enabling proper authentication. + +The headers section is used to specify additional information that should be included in the HTTP request headers when making the API call. + +The value of the "Authorization" header is set to a bearer token, and the token value is dynamically inserted using ${token}. + +The "Bearer" type in the "Authorization" header signifies that the presented token should be treated as a bearer token, providing access to the associated user or client without additional proof of possession. + +````yaml +uploadProfilePicture: + method: POST + uri: https://api.ensemble.co/api/v2/profile-picture + headers: + Authorization: Bearer ${ensemble.storage.token.access_token} + onResponse: + executeCode: + body: | + //@code + console.log(response.body); + ensemble.storage.image = response.body; +```` +````yaml +API: + getNames: + uri: https://myuri.com + method: 'POST' + headers: + "Authorization": "Bearer ${token}" + onResponse: | + // Code for handling the response goes here +```` \ No newline at end of file diff --git a/APIs/index.md b/APIs/index.md new file mode 100644 index 0000000..ae4ded0 --- /dev/null +++ b/APIs/index.md @@ -0,0 +1,24 @@ +# Index Page & InvokeAPI Action with JavaScript + +What is invokeAPI action and how does it work in JavaScript? +**invokeAPI** is used for calling an API. You can call an API on events such as a button tap or on screen load. First, you have to declare an API. Use the `onLoad` property of the view. + +````yaml +View: + onLoad: | + //@code + ensemble.invokeAPI("getPeople"); + body: + Column: + styles: { gap: 16, padding: 24 } + children: + - Text: + text: ${getPeople.body.results.length} records were retrieved from API +```` + +Explore more of what invokeAPI can do for you when creating your app! +# Index +- [GraphQL](/APIs/graphql.md) +- [Headers](/APIs/header.md) +- [onError](/APIs/on-error.md) +- [Rest API](/APIs/rest-api.md) \ No newline at end of file diff --git a/APIs/on-error.md b/APIs/on-error.md new file mode 100644 index 0000000..77429e9 --- /dev/null +++ b/APIs/on-error.md @@ -0,0 +1,29 @@ +# onError + +When making API calls, it's crucial to handle errors gracefully to provide a better user experience and ensure the robustness of your application. In the given code snippet, the onError section is utilized to manage errors that might occur during the execution of the createToDoError API call. + +```yaml +- Button: + label: Call API + onTap: + invokeAPI: + name: createToDoError + onResponse: | + //@code + apiStatus.text = 'Call was successful'; + onError: | + //@code + apiStatus.text = 'API returned an error'; +``` + +```yaml +onError: | + //@code + apiStatus.text = 'API returned an error'; +``` +Error Handling Trigger: +The onError section is triggered when there is an error during the execution of the associated API call (createToDoError). +Response Status Check: +This part of the code checks for errors in the response. If an error occurs, it sets the apiStatus.text to indicate that an error has occurred. +User Feedback: +The apiStatus.text is a variable or element in the user interface used to display feedback to the user. In case of an error, it informs the user that the API call encountered an issue. \ No newline at end of file diff --git a/APIs/rest-api.md b/APIs/rest-api.md new file mode 100644 index 0000000..f431c7f --- /dev/null +++ b/APIs/rest-api.md @@ -0,0 +1,35 @@ +# REST API + +Basic APIs: REST APIs are based on a set of principles, including statelessness, resource-based interactions, and standard HTTP methods (GET, POST, PUT, DELETE). +Dummy JSON: REST APIs typically return data in formats like JSON or XML, and they use endpoints to represent resources. +Response Time: REST APIs may have longer response times, especially when fetching a large amount of data. The client typically asks for specific resources using endpoints. + +```yaml +createToDo: + inputs: + - name + uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' + method: 'POST' + body: + records: + - fields: + desc: "${name}" +``` + +HTTP Method: The API configurations explicitly specify the HTTP method as 'POST', which is a standard RESTful practice for creating resources. +```yaml + method: 'POST' +``` + +Endpoint (URI): The URI (Uniform Resource Identifier) is provided for the Airtable API, and it includes information about the base (appDbkGS4VOiPVQR5) and table (ToDo). This follows the RESTful convention of addressing resources. +```yaml + uri: 'https://api.airtable.com/v0/appDbkGS4VOiPVQR5/ToDo?api_key=keyyWz426zsnMKavb' +``` + +Data Format: The data payload for the POST request is structured in a way that aligns with typical RESTful practices. It uses a JSON format to send the data to be created. +```yaml +body: + records: + - fields: + desc: "${name}" +``` \ No newline at end of file