OpenAPI, Swagger-UI - Dropdown for [Explore] [duplicate] - swagger-ui

I saw in the swagger ui documentation that you can provide a urls parameter which is:
An array of API definition objects ({url: "", name: ""}) used by Topbar plugin. When used and Topbar plugin is enabled, the url parameter will not be parsed. Names and URLs must be unique among all items in this array, since they're used as identifiers.
I was hoping that this will give me a selector from which I can chose which of my yaml files to process. Unfortunately, it doesn't seem to do anything.
Here is my code:
window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
urls: [
{url:"http://test.dev/documentation/microservices/microservices.yaml",name:"All Microservices"},
{url:"http://test.dev/documentation/microservices/plans.yaml",name:"Plans"},
],
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
}
I'd also like to set the primaryName to All Microservices.
Any ideas on where I'm going wrong?

The urls configuration option is supported in Swagger UI 3.0.18 and later.
You can use it instead of url like this:
window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
urls: [
{url: "https://path/to/api1.yaml", name: "API One"},
{url: "https://path/to/api2.yaml", name: "API Two"},
],
"urls.primaryName": "API Two" // default document (if other than the first)
...
})
Result:

Related

Vert.x: can I mix a wildcard route with an explicit route?

I want to host Swagger UI as static content using Vert.x. The swagger-initializer.js needs the spec somewhere on the server and I want it to be in /api/swagger-ui as well, so I can define the spec in swagger-initializer.js as
window.onload = function() {
window.ui = SwaggerUIBundle({
url: "petstore.yaml",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
});
};
It works perfectly like this
Router.router(vertx).route("/api/swagger-ui/petstore.json").handler(StaticHandler.create("path/to/petstore.json"));
Router.router(vertx).route("/api/swagger-ui/*").handler(StaticHandler.create("path/to/swagger-ui"));
serving Swagger UI together with the provided spec.
But I wonder if there are any side effects by mixing a wildcard with an explicit route?
Are there any resources if this is good practice and it doesn't just work by coincidence?
It's fine, because by default routes are matched in the order they are added to the router.
When a request arrives, the router will step through each route and check if it matches, if it matches then the handler for that route will be called.

Nestjs with Neo4j graphQL library causing RangeError: Maximum call stack size exceeded

I am trying to learn a new concept for myself - Graph databases.
I also decided to try out GraphQL with it.
Learning two new technologies... What possibly could go wrong??!?!?
I created a wee apollo+neo4j+neo4j-graphql library project and it works. I could make custom resolvers, the data saves to the DB...everything works great.
So I decided to add a structure to this wee project and what is better than Angular structure, right? So.. . I found Nest JS.
My question is... How do you marry NestJs with Neo4j-graphQL library?
I just keep getting:
RangeError: Maximum call stack size exceeded
With this code
const driver = neo4j.driver(
"bolt://localhost:7687",
neo4j.auth.basic("neo4j", "Qwertyui1!")
);
const neoSchema = new Neo4jGraphQL({
typeDefs,
driver,
config: {
jwt: {
secret: "secret"
}
}
});
let graphSchema: GraphQLSchema = neoSchema.schema;
console.error(graphSchema);
#Module({
imports: [
GraphQLModule.forRoot({
playground: false,
plugins: [ApolloServerPluginLandingPageLocalDefault()],
debug: false,
disableHealthCheck: true,
// typePaths: ['./models/*.graphql'],
definitions: {
path: null
},
schema: graphSchema
})
],
Here is the source code:
https://github.com/mcgri/neo4jWithNestjs

Unable to access Azure blob SAS uri in SwaggerUIBundle url list

I'm trying to create SwaggerUIBundle where the urls will be of Azure Blob Storage container files.
For testing purpose I have hard coded the urls in here like this in my index.jsp file:
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
urls: [
{url: "https://backendsa.blob.core.windows.net/swagger-consolidation/*****", name: "SwaggerConsolidation"},
{url: "https://backendsa.blob.core.windows.net/swagger-consolidation/*****2", name: "SwaggerConsolidation2"},
],
dom_id: '#swagger-ui',
deepLinking: true,
spec: location.host,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
// End Swagger UI call region
These urls are pointing SAS urls for Azure Blob Storage files and are accessible while hitting in open network.
But while I deploy the code it gives below error :
Fetch error
NetworkError when attempting to fetch resource. https://backendsa.blob.core.windows.net/swagger-consolidation/*****
Fetch error
Possible cross-origin (CORS) issue? The URL origin (https://backendsa.blob.core.windows.net) does not match the page (https://router-sc.dev-wus.digitalservices.com). Check the server returns the correct 'Access-Control-Allow-*' headers.
Any insight over the issue would be helpful.
According to the error you provide, you need to configure CORS in Azure blob. Because the swaager UI application is a SPA application. when we call the rest api from a domain different from your website in the application, we will get CORS issue. Regarding how to configure it, please refer to the docuemnt.
For example
Allowed origins: *
Allowed verbs: DELETE,GET,HEAD,MERGE,POST,OPTIONS,PUT
Allowed headers: *
Exposed headers: *
Maximum age (seconds): 86400

How to set request interceptor in SwaggerUIBundle?

In our swagger.json we are setting basePath to /api, however, when the application is deployed in docker container, the context path is not /api. This could be different thing and we don't know what it is so we can't hard code it.
I am trying to set requestInterceptor as per the following guide, in order to catch the request and modify the url path perhaps:
https://swagger.io/docs/swagger-tools/#customization-36
But it seems requestInterceptor is being ignored. Is this possible? If not, how can I set the correct path at runtime?
This is my code in index.html
window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
url: "../api-docs/swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
requestInterceptor: function(request) {
window.alert(request);
},
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
}
We are using Swagger 2.0
Upgrade to the latest version from here, or update your node package. I had the same problem because I downloaded the distribution before requestInterceptor support was added.

How to cache everything but content using sw-precache

I'm using sw-precache in a jekyll website to add offline capabilities with the following configuration:
gulp.task('generate-service-worker', function(cb) {
var path = require('path');
var swPrecache = require('sw-precache');
var rootDir = '_site';
var packageJson = require('./package.json');
swPrecache.write('./service-worker.js', {
staticFileGlobs: [rootDir + '/**/*.{html,css,png,jpg,gif,svg}', rootDir + '/js/*'],
stripPrefix: rootDir + '/',
runtimeCaching: [{
urlPattern: /\/$/,
handler: 'networkOnly'
}],
handleFetch: argv.cacheAssets || false,
maximumFileSizeToCacheInBytes: 10485760, // 10 mb
cacheId: packageJson.name + '-v' + packageJson.version
}, cb);
});
The problem is that, when I change content in the website (for example, text in a blog post, or some text from the index page) the changes won't be shown until the new serviceworker version has been installed and the browser has been refreshed, which of course, is the expected behaviour of cacheFirst.
What I want is to make the request to the index of the site always network first, which is what I'm trying here:
runtimeCaching: [{
urlPattern: /\/$/,
handler: 'networkFirst'
}]
But this isn't working, the index is always getting fetch from the serviceworker and not from network, how can I accomplish this?
My problem is that I was including the actual page contents for precache: '/**/*.{html,css,png,jpg,gif,svg}'.
Excluding the html files works as expected:
'/**/*.{css,png,jpg,gif,svg}'
Change the url pattern to
urlPattern: "'/'"
This is a exact match pattern. Your index will match to this and nothing else.
The solution for this is, treat your index.html as dynamic content.
Change you sw webpack config to
new SWPrecacheWebpackPlugin({
cacheId: 'yourcacheid',
filename: 'service-worker.js',
staticFileGlobs: [
'dist/**/*.{js,css}'
],
minify: true,
stripPrefix: 'dist/',
runtimeCaching: [{
urlPattern: /\/$/,
handler: 'networkFirst'
}]
})
Remove your index.html from staticFileGlobs and add you root index to runtime caching.
Then look at your cache storage. You will see something like $$$toolbox-cache$$$https://your-domain.com as a new cache item. Inspect that and you can see your index cached there.

Resources