useAPIKeys()
The useAPIKeys() hook provides access to the API keys associated with a user or organization. It returns a paginated list of APIKeyResource objects and includes methods for managing pagination.
Parameters
useAPIKeys() accepts a single optional object with the following properties:
- Name
subject- Type
string- Description
The ID of the user or organization to fetch API keys for. If not provided, defaults to the if available, otherwise defaults to the current user.
- Name
query- Type
string- Description
A search query to filter API keys by name.
- Name
enabled- Type
boolean- Description
If
true, a request will be triggered when the hook is mounted. Defaults totrue.
- Name
infinite- Type
boolean- Description
If
true, newly fetched data will be appended to the existing list rather than replacing it. Useful for implementing infinite scroll functionality. Defaults tofalse.
- Name
initialPage- Type
number- Description
A number that specifies which page to fetch. For example, if
initialPageis set to 10, it will skip the first 9 pages and fetch the 10th page. Defaults to1.
- Name
pageSize- Type
number- Description
A number that specifies the maximum number of results to return per page. Defaults to
10.
- Name
keepPreviousData- Type
boolean- Description
If
true, the previous data will be kept in the cache until new data is fetched. Defaults tofalse.
- Name
data- Type
T[]- Description
An array that contains the fetched data. For example, for the
membershipsattribute,datawill be an array of OrganizationMembership objects.
- Name
count- Type
number- Description
The total count of data that exist remotely.
- Name
isLoading- Type
boolean- Description
A boolean that is
trueif there is an ongoing request and there is no fetched data.
- Name
isFetching- Type
boolean- Description
A boolean that is
trueif there is an ongoing request or a revalidation.
- Name
isError- Type
boolean- Description
A boolean that indicates the request failed.
- Name
page- Type
number- Description
The current page.
- Name
pageCount- Type
number- Description
The total amount of pages. It is calculated based on
count,initialPage, andpageSize.
- Name
fetchPage- Type
(page: number) => void- Description
A function that triggers a specific page to be loaded.
- Name
fetchPrevious- Type
() => void- Description
A function that triggers the previous page to be loaded. This is the same as
fetchPage(page => Math.max(0, page - 1)).
- Name
fetchNext- Type
() => void- Description
A function that triggers the next page to be loaded. This is the same as
fetchPage(page => Math.min(pageCount, page + 1)).
- Name
hasNextPage- Type
boolean- Description
A boolean that indicates if there are available pages to be fetched.
- Name
hasPreviousPage- Type
boolean- Description
A boolean that indicates if there are available pages to be fetched.
- Name
revalidate- Type
() => void- Description
A function that triggers a revalidation of the current page.
- Name
setData- Type
(data: any[]) => void- Description
A function that allows you to set the data manually.
'use client'
import { useAPIKeys } from '@clerk/nextjs'
export default function APIKeysList() {
const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useAPIKeys({
pageSize: 10,
})
if (isLoading) {
return <div>Loading...</div>
}
if (!data || data.length === 0) {
return <div>No API keys found.</div>
}
return (
<div>
<ul>
{data.map((apiKey) => (
<li key={apiKey.id}>
<strong>{apiKey.name}</strong>
<br />
Subject: {apiKey.subject}
<br />
Revoked: {apiKey.revoked ? 'Yes' : 'No'}
<br />
Created: {apiKey.createdAt.toLocaleDateString()}
</li>
))}
</ul>
<div>
Page {page} of {pageCount}
</div>
<button onClick={() => fetchPrevious()}>Previous</button>
<button onClick={() => fetchNext()}>Next</button>
</div>
)
}Infinite pagination
The following example demonstrates how to implement infinite scrolling with API keys.
'use client'
import { useAPIKeys } from '@clerk/nextjs'
export default function InfiniteAPIKeys() {
const { data, isLoading, hasNextPage, fetchNext } = useAPIKeys({
infinite: true,
pageSize: 20,
})
if (isLoading) {
return <div>Loading...</div>
}
if (!data || data.length === 0) {
return <div>No API keys found.</div>
}
return (
<div>
<ul>
{data.map((apiKey) => (
<li key={apiKey.id}>
<strong>{apiKey.name}</strong>
<br />
Subject: {apiKey.subject}
<br />
Revoked: {apiKey.revoked ? 'Yes' : 'No'}
</li>
))}
</ul>
{hasNextPage && <button onClick={() => fetchNext()}>Load more API keys</button>}
</div>
)
}With search query
The following example demonstrates how to use the query parameter to search API keys by name.
'use client'
import { useAPIKeys } from '@clerk/nextjs'
import { useState } from 'react'
export default function SearchAPIKeys() {
const [search, setSearch] = useState('')
// Consider debouncing `search` in production to avoid firing a request on every keystroke
const { data, isLoading } = useAPIKeys({
query: search,
pageSize: 10,
})
return (
<div>
<input
type="text"
placeholder="Search API keys..."
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
{isLoading ? (
<div>Loading...</div>
) : !data || data.length === 0 ? (
<div>No API keys found.</div>
) : (
<ul>
{data.map((apiKey) => (
<li key={apiKey.id}>
<strong>{apiKey.name}</strong> - {apiKey.subject}
</li>
))}
</ul>
)}
</div>
)
}Feedback
Last updated on