webflow / js-webflow-api Goto Github PK
View Code? Open in Web Editor NEWNode.js SDK for the Webflow Data API
Home Page: https://www.npmjs.com/package/webflow-api
Node.js SDK for the Webflow Data API
Home Page: https://www.npmjs.com/package/webflow-api
To match with the new supported PATCH http method.
I am solving a problem similar to what you have solved and I thought you would may like to help.
I want to dynamically create subdomain sites such as "user1.example.com", "user2.example.com" and serve static html and css based on subdomain. For a real world example blogger.com servers html and css for different users on blogspot domainl link https://althouse.blogspot.com/. I want to do exactly the same thing like blogger
Questions:
What code do I need to write for determining subdomain (using js). For example user1.example.com the subdomain is user1.
Should I store user html, css in s3 by creating folders such as user1/, user2/.
Could you tell the approach you took for your platform?
I'd been using this library pinned to version 0.6.0 for a while and now upgraded to the lastest version in order to benefit from not having to publish the entire site in order to publish changed CMS items (which I've still had to implement workarounds for due to #89).
As the new methods (I suspect since the TS rewrite) do not return the API's response data anymore (but rather arrays or instances of Item
objects), the pagination data from the API response is not accessible anymore.
This means that when querying collection.items({ offset: 0, limit: 100 })
I get no feedback about the total
amount of items in the collection. I could also not find a simple alternative way of querying the item count of a collection – which means that these methods are broken, as they will only ever return the first 100 items of a collection, with no hint as to whether there are any more.
One hacky workaround would be to make another request for collection.items({ offset: 100, limit: 100 })
whenever exactly 100 items have been returned. This is, however, a waste of my precious requests given the unpredictable and tight rate limiting applied to the API (considering items can only be created, updated or deleted individually one per request).
I'm currently working around this by calling Webflow.get
with /collections/${collectionId}/items?offset=${offset}&limit=${limit}
manually and parsing response.data
, but that sort of defeats the purpose of using this SDK in the first place.
Recently I've been attempting to poll Webflow for the X-RateLimit-Remaining
header to pre-check before attempting to make a series of calls. I began to notice that the _meta item wasn't available in all requests (only seems to work for Webflow.items)
I forked the project to look into this issue and determine if this was a bug or by design. I found that response bodies that parse into a simple array fail to append the rateLimit object returned by buildMeta() because...well you can't append an object to an array. I wouldn't mind submitting a PR but am curious as to whether this fix belongs in the responseHandler and a check for the body type determines how to append the rateLimit object or if this fix really resides with the ResponseWrapper.
The API documentation on developers.webflow.com seems to allow items to be created or updated to the live page without publishing the whole site. However this doesn't seem to be supported by this API (or at least I can't get it to work).
I've tried all the techniques described in passed issues but without any success.
If it is already possible I would like to ask for this to be added to the README.md since in my opinion this is a quite important part of this API.
Hi Team, hopefully this is right place to ask, if not, I'd appreciate if you can direct me.
I'm the founder of cloudquery.io, a high performance open source ELT framework.
Our users are interested in a Webflow plugin, but as we cannot maintain all the plugins ourselves, I was curious if this would be an interesting collaboration, where we would help implement an initial source plugin, and you will help maintain it.
This will give your users the ability to sync Webflow data to any of their datalakes/data-warehouses/databases easily using any of the growing list of CQ destination plugins.
Best,
Yevgeny
Any thoughts on making this work client-side as well? Would love to have a simple wrapper to use Webflow inside of the client js on a webflow site that has some Ajax-style features. For example, if I wanted to incorporate an infinite scroll widget on the site, I would need to fetch from the API on the client and don't really like the idea of setting up a proxy...
Would even consider contributing toward something like this. Thoughts?
Should be api.site({ siteId: SITE_ID })
instead of api.site(SITE_ID)
The API documentation allows for live publishing new content, but when adding live:true to the data, it doesn't appear to be auto-publishing the new item. Moreover the documentation for live creating items indicates a query parameter rather than in the data itself directly. Can this be added to the createItems method here in the library very soon?
Hi!
The webflow.updateItem(...)
method introduced a spread operation in the arguments that makes it behavior differently (and unnecessary) from other methods on the object.
The documentation (READme.md) specifies that both the updateItem
and createItem
methods can be used like so:
// Create a new item
await webflow.createItem({
collectionId,
fields,
});
// Update an item
await webflow.updateItem({
collectionId,
itemId,
fields,
});
However, the updateItem
function doesn't work like this, as the method uses a spread operator and thus expects all fields to be at the top level of the passed object:
async updateItem({ collectionId, itemId, ...fields }: { itemId: string; collectionId: string }) {
const _params = { collectionId, itemId, fields };
const res = await Item.update(_params, this.client);
return new Item(this.client, res);
}
This means that in order to use the method, you must use the following patter:
// Update an item
await webflow.updateItem({
collectionId,
itemId,
...fields,
});
This is a little awkward...and could be improved in the future by making a breaking change in the next major version bump.
In the meantime, updating the docs should help 👍
When trying to fetch a site where the site ID is invalid or unknown, a weird message appears:
node fun.js:
{ [WebflowError]
_meta: { rateLimit: { limit: NaN, remaining: NaN } },
code: undefined,
msg: undefined }
Hi Webflow,
I've noticed that this repo has been a bit unloved for a few years and wondering if there are any plans to add new features to the Webflow CMS API, and in turn this library. Things like:
The trend with other CMS systems seems to be ease of integration and overall developer experience. It would be a shame to see Webflow fall further behind here.
I am trying to authorise my react app with the webflow app , using auth0-react
.
This library sends a 'openid' as a scope by default, including the customised scope.
Which currently is not supported in the following list of scopes, which makes the flow incomplete on my app with this error.
https://docs.developers.webflow.com/reference/authorization
https://webflow.com/oauth/authorize?
client_id={{client_id}}
scope=openid assets:read sites:read users:read authorized_user:read
response_type=code
response_mode=query
state={{state}}
nonce={{nonce}}
code_challenge={code_challeng}}
code_challenge_method: S256
auth0Client={{auth0Client}}
After logging in at Webflow.
{appUrl}}/loginRedirect?error=invalid_scope&error_description=The following scopes are invalid:openid&state={{state}}
error: invalid_scope
error_description: The following scopes are invalid: openid
The expected flow should work withopenid
as a scope .
Any help around this will be appreciated.
So I got this results from my CMS collection, which is all good and well.
{
"items": [
{
"_archived": false,
"start-date-time": "2019-02-23T10:00:00.000Z",
"_draft": false,
"p2-link": "https://www.partner-link.com/",
"p1-link": "https://www.partner-link.africa/",
"rsvp-link": "https://www.eventbrite.com/",
"end-date-time": "2019-02-23T13:00:00.000Z",
"short-description": "Monetizing Your Platform",
"name": "Conversations On Creativity",
"location": "Cape Town, 8000",
"slug": "monetizing-your-platform",
"partner-2": {
"fileId": "5c62d1595e0efd23773b0743",
"url": "https://uploads-ssl.webflow.com/596c8581d477b751b56b552d/5c62d1595e0efd23773b0743_powered-by.png",
"alt": null
},
"city": "5bab7da4b1bf68f5db770d10",
"updated-on": "2019-06-27T16:10:43.390Z",
"updated-by": "Person_56158ed47e3abd036e145818",
"created-on": "2019-02-13T08:18:13.238Z",
"created-by": "Person_56158ed47e3abd036e145818",
"published-on": "2019-02-13T18:33:41.606Z",
"published-by": "Person_56158ed47e3abd036e145818",
"description": "<p>Maybe you run a blog, or you’re thinking about starting one. Maybe you’re thinking about advertising revenues. What about brand partnerships? Join us for a conversation on how creatives + entrepreneurs in South Africa are building and creating revenue streams for their platforms – ",
"_cid": "596cb1d702aa16713e5467bd",
"_id": "5c63d2c5352968da01354f73"
}
],
"count": 7,
"limit": 7,
"offset": 0,
"total": 43
}
Is there a way to rename the keys that that have a dash in them because I can not read them on my front end.
<ion-card *ngFor="let event of allEvents; let i = index;">
<p> {{ event.start-date-time }} </p> <-- does not compile/render it says NaN
<p> {{ event.short-description }} </p> <-- does not render
<h3> Our Partners </h3>
<h6> {{ event.p1-link }} </h6> <-- problem
</ion-card>
On the back-end I tried to look for / at how to add under_scores
but I did not find this
We're on version 1.2.2 however today 1.3.0 was installed by our CI system and it appears there's a bug.
Cannot find module './core' in webflow-api/dist/index.js
Upon inspection of the installed package it appears that the only file in webflow-api/dist/
is index.js
.
api.user() actually corresponds to GET /sites/:site_id/users/:user_id
hi,
i don't know where the best place is to publish this, so i'm just leaving this here:
in case you want to talk to the api via ruby, i created this gem: https://github.com/phoet/webflow-ruby
cheers!
node_modules\.pnpm\[email protected]\node_modules\webflow-api\dist\core\webflow.js:242
return res.data.map((data) => new api_1.Site(this.client, { ...res, data }));
^
TypeError: res.data.map is not a function
at Webflow.sites (C:\Users\yihen\Projects\test\webflow\node_modules\.pnpm\[email protected]\node_modules\webflow-api\dist\core\webflow.js:242:25)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at async FnName (C:\Users\yihen\Projects\test\webflow\client.ts:11:16)
We tried to update fields within collection item with new api v2 sdk and we are getting response status as 200. Still when we check webflow item fields they do not get updated there. We are trying to update optimized images using api v2 sdk but they are not getting updated
- Here I am attaching code through which we are updating images
- Here I am getting status as 200
- The data which we are sending
- The log of image which we optimized we compressed it from 154KB to 139KB and we are trying to upload that 139KB image
- We refreshed webflow and checked but in field the image do not get updated.
Hello!
We recently started using this package and it's been great.
However, my team noticed that using the package causes Jest to break 😬
We tried importing via const Webflow = require("webflow-api");
and import Webflow from "webflow-api";
but the issue happens for both.
First time we've ever seen Jest freak out about something like this.
Versions
webflow-api
version 1.2.2
typescript
version 4.4.4
node
version 16.14.0
Line 182 in 2e7c77d
README shows:
// call update
const updatedItem = await webflow.updateItem({
collectionId: "[COLLECTION ID]",
itemId: "[ITEM ID]",
fields,
});
It should be:
// call update
const updatedItem = await webflow.updateItem({
collectionId: "[COLLECTION ID]",
itemId: "[ITEM ID]",
...fields,
});
It appears a breaking change was made to the collections endpoint.
Previously, the elements of a collection were in an array under the items
key.
Now, they are under a new fields
key.
User error.
In this link: https://developers.webflow.com/#get-specific-site
The example request using JS shows that the method should be .sites
. However, by taking a look at the actual implementation of the code, we should use .site({siteId})
to get information specific to a given website.
Is there a particular reason why the prefix api.
is hardcoded and not included in DEFAULT_HOST
? What if a custom host doesn't include that specific prefix?
I really hope Webflow can generate React code directly not only jquery code.
An example from the module declaration
declare class Webflow {
...
items(
data: {
collectionId: string;
},
query?: Webflow.WebflowQueryArg
): Promise<Webflow.WebflowApiModel.CollectionItem[]>;
...
}
The return type Promise<Webflow.WebflowApiModel.CollectionItem[]>
should actually match the shape of the returned data, looking something like this:
Promise<{
items: Webflow.WebflowApiModel.CollectionItem[];
count: number,
limit: number,
offset: number,
total: number,
_meta: {
rateLimit: {
limit: number,
remaining: number
}
}
}>
For anyone facing this issue, my temporary fix is to create a custom type that mimics this, then use @ts-ignore
to suppress the errors.
I wanted to add the beta flag to transition to v.2 however it is not inside the type definition also in your usage example it is missing.
It's not immediately obvious which function handles a particular API.
For example
GET /sites/:site_id/users is handled by api.users(siteId)
whereas
GET /sites/:site_id/users/:user_id is handled by api.user(siteId, userId)
It would help to have a list of functions and the corresponding CMS API
It looks like the last update was almost a year ago and the project has some TODOs. I would love to contribute but it looks like issues and PRs are simply ignored and I don’t want to spend my time if this codebase is being neglected.
webflow.sites({ siteId: "[ SITE ID ]" })
seems to be returning all the sites associated to the authenticated user and not the specific site for the provided id
Since late 2019 the CMS RichText fields have supported Embedded content.
https://webflow.com/feature/custom-code-in-rich-text-elements
It seems like that content is not returned by the API. I can't seem to find anywhere in the documentation how we can get back our embedded content that's stored inside of RichText fields in the CMS.
Many users of this library have noted that it has a minor security issue: #30
A fix for this issue has been merged into master for 6 weeks, but has not been released. Publishing a new version of this library with the included fix should resolve the majority of outstanding complaints around this library.
As far as I can tell, CI/CD is already set up so all that is needed is someone with commit access to run npm version patch
.
Per the docs, you should be able to set the token after initialization to anything you want: https://github.com/webflow/js-webflow-api#update-token
Unfortunately, the setter only updates this.options
, and fails to update the underlying axios this.client
. this.options
are not referenced by the methods recommended for v2 API, and only this.client
is used, so no Authorization header is included in the requests... :/
The axios this.client.config
needs to be updated when the token is updated or the individual get
, post
, etc. methods need to be updated to use this.options
with every request.
Due to security reasons, our token and authorization with Webflow is handled by a Man In The Middle proxy, forcing us to pass a dummy (and unneeded) string as the token during initialization.
Would it be possible to add a flag to disable requiring the token on initialization? I know it's an edge case but It could be useful to other people/projects as well.
I can provide a PR if instructed with the naming convention.
Thanks!
Using the basic instructions to access the API like stated in the readme, i cannot make it work using it in my local environment.
I have a API Token and try to access the API via the following:
import Webflow from 'webflow-api';
// initialize the client with the access token
const webflow = new Webflow({ token: process.env.WEBFLOW_ACCESS_TOKEN });
But this shows me the following console error:
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
for this line: RedirectableRequest.prototype = Object.create(Writable.prototype);
Is the reason because i’m trying to access it via localhost or is there something wrong with the package/my environment? Using [email protected]
, [email protected]
webflow-api@^1.2.0
and vite@^3.2.3
Hi guys,
I stumbled upon a weird bug, and I'd like to report it.
We're working on an integration with the Webflow API, and we need to clear a collection and re-add new items daily.
Everything was ok, until we started testing item creation (createItem
) with {live: true}
and failed again and again.
After a few tries, I figured out that it only fails if there are no items in the collection. If I first create another item without {live: true}
and then try to create a new one with {live: true}
, it works.
It's a weird bug, and I have no idea why it happens or if it's by design... hope it helps, though.
In the meantime, I guess we'll just have to use a dummy item and keep it staged in the beginning of each refresh cycle.
Please let me know if you manage to fix it, though!
Thanks!
Hi All, I'm following along on your starter tutorial and have noticed an issue with your authorizeUrl method.
It keeps returning https://undefined/oauth
I've debugged the issue and what's happening is that the value of this is not actually getting the correct values.
Instead of using this.host
it should be looking for this.client.host
Would be helpful if the SDK used typescript generics which populate the Item
fields from the users schema. Otherwise its not typesafe.
It's good that there is now a way to access 'GET /user', but the method name 'installer' is not at all obvious.
The description for the request is 'Basic information about the current authorized user.'.
I think it would be clearer to call the method 'current_user' or similar, rather than 'installer', which suggests something entirely different.
Any plans on creating Typescript definitions for this library? It would be a nice boost to developer ergonomics.
I'm getting a collection item which has an option field on it. The API is returning the option as an optionId, and I'm not seeing any documentation on how to get it return as the actual string instead, or get the option string from the optionId.
Do you think a params
object can be added to the client options?
This is an issue with reference to Webflow Documentation and not the SDK. I do not know where to report it.
Request from API Playground on https://developers.webflow.com/reference/create-field
const options = {
method: 'POST',
headers: {
accept: 'application/json',
'content-type': 'application/json',
authorization: 'Bearer ************'
},
body: JSON.stringify({isRequired: true, type: 'Date/Time', displayName: 'Manufacturing Date'})
};
fetch('https://api.webflow.com/beta/collections/************/fields', options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
Returns:
{
"message": "Validation Error: Invalid field type: Date/Time",
"code": "validation_error",
"externalReference": null,
"details": []
}
Solution
I tried using the format type "DateTime" instead of "Date/Time" and it worked.
Requesting you make the changes in the documentation.
Hi,
We were migrating our front facing website to Webflow from PHP stack and found there is no PHP SDK, so we did create it.
Feel free to use, contribute and request features:
https://github.com/expertlead/webflow-php-sdk
Best,
Hello,
I've read various threads about the support for uploading imagery - and apparently it should be available, right?
Yet when I look at the Webflow.js
file here https://github.com/webflow/js-webflow-api/blob/master/src/Webflow.js#L220
I can see that images
are commented out as TODO
How can I upload an image to webflow site, and get the usable url back?
stories.map((story) => {
if (!story.hasOwnProperty("story-id")) {
const data ={
fields: {
"story-id": story._id,
},
};
return storiesCollection
.patchLiveItem(story._id, data)
.then((response) => {
logger.debug(response);
logger.debug(`Successfully patched story: ${story._id}`);
})
.catch((reason) => {
if (reason !== null) {
logger.error(reason);
}
});
}
})
NOTE: Above you'll see a snippet of code from my project (.patchLiveItem() is convenience wrapper around .pathItem() that adds {live:true} by default to the query parameter. My wrapper also includes the collection id automatically.
I've tried several different iterations, but I always get the "fields is required" error.
Sometimes when I try to update an item, it triggers an error Unique value is already in database
and duplicates it. It also happen using the patch method
I'm using version 0.5.0
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.