/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", a: "a", code: "code", h2: "h2", span: "span", h3: "h3", strong: "strong", pre: "pre" }, _provideComponents(), props.components), {Attributes, Attribute} = _components; if (!Attribute) _missingMdxReference("Attribute", true); if (!Attributes) _missingMdxReference("Attributes", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["Represents the connection between a user and a feed, including methods for interacting with the items on that feed. Also includes a stateful store that can be used to build in-app notification experiences easily. See ", _jsx(_components.a, { href: "#feedstorestate", children: _jsx(_components.code, { children: "FeedStoreState" }) }), " for more on the shape of the store."] }), "\n", _jsxs(_components.h2, { id: "properties", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#properties", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Properties"] }), "\n", _jsxs(_components.h3, { id: "store", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#store", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "store" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "StoreApi" })] }), "\n", _jsxs(_components.h2, { id: "methods", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#methods", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Methods"] }), "\n", _jsxs(_components.h3, { id: "listenforupdates", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#listenforupdates", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "listenForUpdates" })] }), "\n", _jsx(_components.p, { children: "Connects the feed instance to the realtime socket so that any new items published to the feed are received over the websocket." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "void" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Example" }), ":"] }), "\n", _jsx(_components.pre, { title: "Connecting to a realtime stream", children: _jsx(_components.code, { className: "language-javascript", children: "import { Knock } from \"@knocklabs/client\";\n\nconst knock = new Knock(process.env.KNOCK_PUBLIC_API_KEY);\nknock.authenticate({ id: user.id });\n\nconst knockFeed = knock.feeds.initialize(process.env.KNOCK_FEED_CHANNEL_ID);\n\n// Listen for updates\nknockFeed.listenForUpdates();\n\n// Stop listening\nknockFeed.teardown();\n" }) }), "\n", _jsxs(_components.h3, { id: "on", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#on", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "on" })] }), "\n", _jsx(_components.p, { children: "Binds an event handler to be invoked when the event is triggered." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Events" }), ":"] }), "\n", _jsxs(Attributes, { children: [_jsx(Attribute, { name: "items.received.realtime", type: "event", description: "Invoked whenever items are received in realtime from the socket." }), _jsx(Attribute, { name: "items.received.page", type: "event", description: "Invoked whenever items are received from performing a fetch. Will be invoked for the initial fetch as well." }), _jsx(Attribute, { name: "items.received.*", type: "event", description: "Invoked when any event with a name matching this pattern is emitted, e.g. `items.received.realtime` or `items.received.page`." }), _jsx(Attribute, { name: "items.archived", type: "event", description: "Invoked when one or more items are archived." }), _jsx(Attribute, { name: "items.unarchived", type: "event", description: "Invoked when one or more items are unarchived." }), _jsx(Attribute, { name: "items.seen", type: "event", description: "Invoked when one or more items are seen." }), _jsx(Attribute, { name: "items.unseen", type: "event", description: "Invoked when one or more items are unseen." }), _jsx(Attribute, { name: "items.read", type: "event", description: "Invoked when one or more items are read." }), _jsx(Attribute, { name: "items.unread", type: "event", description: "Invoked when one or more items are unread." }), _jsx(Attribute, { name: "items.all_archived", type: "event", description: "Invoked when all items in the current scope are marked as archived." }), _jsx(Attribute, { name: "items.all_seen", type: "event", description: "Invoked when all items in the current scope are marked as seen." }), _jsx(Attribute, { name: "items.all_read", type: "event", description: "Invoked when all items in the current scope are marked as read." }), _jsx(Attribute, { name: "items.*", type: "event", description: "Invoked when any event with a name matching this pattern is emitted, e.g. `items.read` or `items.archived`." })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsxs(Attributes, { children: [_jsx(Attribute, { name: "eventName", type: "enum of `messages.new` | `items.received.realtime` | `items.received.page` | `items.received.*`", description: "The type of event to bind to." }), _jsx(Attribute, { name: "callback", type: "function", description: "A function to be invoked when the event is triggered." })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "void" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Example" }), ":"] }), "\n", _jsx(_components.pre, { title: "Listening to items being received", children: _jsx(_components.code, { className: "language-javascript", children: "import { Knock } from \"@knocklabs/client\";\n\nconst knock = new Knock(process.env.KNOCK_PUBLIC_API_KEY);\nknock.authenticate({ id: user.id });\n\nconst knockFeed = knock.feeds.initialize(process.env.KNOCK_FEED_CHANNEL_ID);\n\nknockFeed.on(\"items.received.page\", ({ items }) => {\n console.log(items);\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "off", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#off", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "off" })] }), "\n", _jsxs(_components.p, { children: ["Unbinds an existing event handler previously bound with ", _jsx(_components.code, { children: "on" }), ". Use this method to cleanup bound event handlers."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "void" }), "."] }), "\n", _jsxs(_components.h3, { id: "getstate", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#getstate", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "getState" })] }), "\n", _jsxs(_components.p, { children: ["Programmatically access the current ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.h3, { id: "markallasseen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markallasseen", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAllAsSeen" })] }), "\n", _jsxs(_components.p, { children: ["Marks all of the items in the store optimistically as seen and performs a server-side request to mark ", _jsx(_components.strong, { children: "all items on the feed in the current scope" }), " as seen. Broadcasts a ", _jsx(_components.code, { children: "items:all_seen" }), " event."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Please note" }), ": this operation is deferred and may take some time to process all items in the feed."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasseen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasseen", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsSeen" })] }), "\n", _jsxs(_components.p, { children: ["Marks the given items as ", _jsx(_components.code, { children: "seen" }), ". Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasunseen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasunseen", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsUnseen" })] }), "\n", _jsxs(_components.p, { children: ["Removes the ", _jsx(_components.code, { children: "seen" }), " status on the item or items given. Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markallasread", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markallasread", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAllAsRead" })] }), "\n", _jsxs(_components.p, { children: ["Marks all of the items in the store optimistically as read and performs a server-side request to mark ", _jsx(_components.strong, { children: "all items on the feed in the current scope" }), " as read. Broadcasts a ", _jsx(_components.code, { children: "items:all_read" }), " event."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Please note" }), ": this operation is deferred and may take some time to process all items in the feed."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasread", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasread", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsRead" })] }), "\n", _jsxs(_components.p, { children: ["Sets the ", _jsx(_components.code, { children: "read" }), " status on the item or items given. Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasunread", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasunread", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsUnread" })] }), "\n", _jsxs(_components.p, { children: ["Removes the ", _jsx(_components.code, { children: "read" }), " status on the item or items given. Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markallasarchived", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markallasarchived", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAllAsArchived" })] }), "\n", _jsxs(_components.p, { children: ["Marks all of the items in the store optimistically as archived and performs a server-side request to mark ", _jsx(_components.strong, { children: "all items on the feed in the current scope" }), " as archived. Broadcasts a ", _jsx(_components.code, { children: "items:all_archived" }), " event."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Please note" }), ": this operation is deferred and may take some time to process all items in the feed."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasarchived", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasarchived", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsArchived" })] }), "\n", _jsxs(_components.p, { children: ["Sets the ", _jsx(_components.code, { children: "archived" }), " status on the item or items given. Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), ". Broadcasts a ", _jsx(_components.code, { children: "items:archived" }), " event."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasunarchived", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasunarchived", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsUnarchived" })] }), "\n", _jsxs(_components.p, { children: ["Removes the ", _jsx(_components.code, { children: "archived" }), " status on the item or items given. Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "markasinteracted", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#markasinteracted", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "markAsInteracted" })] }), "\n", _jsxs(_components.p, { children: ["Sets the ", _jsx(_components.code, { children: "interacted" }), " status on the item or items given. Will perform the operation optimistically, including updating the current ", _jsx(_components.code, { children: "metadata" }), " in the ", _jsx(_components.code, { children: "FeedStoreState" }), ". Broadcasts an ", _jsx(_components.code, { children: "items:interacted" }), " event."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsxs(Attributes, { children: [_jsx(Attribute, { name: "itemOrItems", type: "FeedItemOrItems", description: "A single `FeedItem` or a list of `FeedItem` to perform the update on." }), _jsx(Attribute, { name: "metadata", type: "Record", description: "Additional metadata to be stored with the interaction event." })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "fetch", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fetch", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "fetch" })] }), "\n", _jsx(_components.p, { children: "Fetches items from the feed." }), "\n", _jsxs(_components.p, { children: ["Emits ", _jsx(_components.code, { children: "items.received.page" }), " events on a successful fetch."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Parameters" }), ":"] }), "\n", _jsx(Attributes, { children: _jsx(Attribute, { name: "options", type: "FetchFeedOptions", description: "Options to pass through to the feed request" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Returns" }), ": ", _jsx(_components.code, { children: "Promise" })] }), "\n", _jsxs(_components.h3, { id: "fetchnextpage", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fetchnextpage", children: _jsx(_components.span, { className: "icon icon-link" }) }), _jsx(_components.code, { children: "fetchNextPage" })] }), "\n", _jsx(_components.p, { children: "Fetches the next page of the feed items (if there are any more to fetch)." }), "\n", _jsxs(_components.p, { children: ["Emits ", _jsx(_components.code, { children: "items.received.page" }), " events on a successful fetch."] }), "\n", _jsx(_components.p, { children: "Note: this will apply any current feed filters and append returned items to the end of the current set of items." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

ApiClient reference

Properties

socket

`socket`