Apollo Hooks
This section provides in-depth information on the hooks for Apollo mutations and queries automatically generated by the GraphQL CodeGen tool.
Mutations
Mutations are often used to interact with the GraphQL API resulting to changes (creating / updating) to the underlying model's data.
When initializing a mutation hook, it is important to pass to it a context
which provides a different network endpoint needed by the mutations
Calling a mutation returns a tuple that includes:
- A
mutate
function that you can call at any time to execute the mutation. - An object with fields that represent the current status of the mutation's execution.
useCreateAppMutation
Create an application
This hook provides the mutation function to create the underlying model's data. It is helpful in creating robust applications.
Example usage
import { useCreateAppMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [createApp, { data, error, loading }] = useCreateAppMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleCreateApp = () => {
// call the mutation function
createApp({
variables: {
i: {
content: {
name: 'appId',
license: 'License',
applicationType: 'APP',
displayName: 'AmazingApp',
description: 'this is an amazing app',
createdAt: new Date().toISOString(),
}
}
},
onError, // fn to be called if the mutation fails
OnCompleted, // fn to be called when the mutation completes execution
...
}).then(resp => {
// handle response data here
}).catch(err => {
// handle error message here
})
}
useCreateBeamMutation
Create a beam
This hook provides the mutation function to create the underlying model's data. It is helpful in creating beams during the blocks publishing process of the editor. These beams can then be viewed in an antenna app or any other list app curating beams.
Example usage
import { useCreateBeamMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [createBeam, { data, error, loading }] = useCreateBeamMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleCreateBeam = () => {
const tagLabelType = sdk.services.gql.labelTypes.TAG;
createBeam({
variables: {
i: {
content: {
nsfw: false,
active: true,
content: [
{
blockID: 'blockID',
order: 1
}
],
tags: [
{
labelType: tagLabelType
value: 'akasha'
},
{
labelType: tagLabelType
value: 'world'
},
],
createdAt: new Date().toISOString(),
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useCreateContentBlockMutation
Create a content block
This hook provides the mutation function to create the underlying model's data. It is helpful in creating content blocks during the blocks publishing process of the editor.
Example usage
import { useCreateContentBlockMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const [createContentBlock, { data, error, loading }] = useCreateContentBlockMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleCreateContentBlock = () => {
createContentBlock({
variables: {
i: {
content: {
nsfw: false,
active: true,
appVersionID: 'k2t6wzhkhabz3aut9p2mhjzp80hzo7bee18l1pt94syakfbfcj7phve27kiwwp',
content: [{
label: 'appName',
propertyType: 'propertyType'
value: 'content'
}],
kind: 'TEXT',
createdAt: new Date().toISOString(),
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useCreateFollowMutation
Create a follow document to a profile
This hook provides the mutation function to create the underlying model's data. It is helpful in keeping track of a profile's followers or following data. The mutation is called only when there is no existing follow document id for the profile. If it exists, useUpdateFollowMutation should be used instead.
Example usage
import { useCreateFollowMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [createFollow, { data, error, loading }] = useCreateFollowMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
/**
* use this mutation,
* only when there is no follow document id.
*/
const followId = null;
const handleCreateFollow = () => {
if (!followId) {
createFollow({
variables: {
i: {
content: {
isFollowing: true,
profileID: 'did:pkh:eip155:11155111:0x2c953cd8d24004406570840a'
createdAt: new Date().toISOString(),
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
}
useCreateInterestsMutation
Create an interest or list of interests
This hook provides the mutation function to create the underlying model's data. It is helpful in subscribing to a topic or list of topics The mutation is called only when there is no existing
tagSubscriptionId
for the given profile. If it exists, useUpdateInterestsMutation should be used instead.
Example usage
import { useCreateInterestsMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [createInterests, { data, error, loading }] = useCreateInterestsMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
/**
* use this mutation,
* only when there is no tag subscription id.
*/
const tagSubscriptionId = null;
const handleCreateInterests = () => {
if (!tagSubscriptionId) {
createInterests({
variables: {
i: {
content: {
topics: [{
value: 'akasha',
labelType: sdk.services.gql.labelTypes.INTEREST
},
{
value: 'world',
labelType: sdk.services.gql.labelTypes.INTEREST
}
]
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
}
useCreateProfileMutation
Create a profile
This hook provides the mutation function to create the underlying model's data. It is helpful in creating new user profiles upon authentication.
Example usage
import { useCreateProfileMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [createProfile, { data, error, loading }] = useCreateProfileMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleCreateProfile = () => {
createProfile({
variables: {
i: {
content: {
nsfw: false,
name: 'New Profile',
description: 'this is a new profile',
links: [
{
href: 'http://sociallink1'
},
{
href: 'http://sociallink2'
}
],
avatar: '', // new profile's avatar
background: '', // new profile's cover image
createdAt: new Date().toISOString(),
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useCreateReflectMutation
Create a reflection to a beam or a beam's reflection
This hook provides the mutation function to create the underlying model's data. It is helpful in creating a reflection to a beam or a beam's reflection.
Example usage
import { useCreateReflectMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [createReflection, { data, error, loading }] = useCreateReflectMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleCreateReflection = () => {
createReflection({
variables: {
i: {
content: {
active: true,
beamId: 'beamId',
content: [
{
label: 'label',
propertyType: 'slate-block',
value: 'encodedSlateContent'
}
],
reflection: 'reflectToId' // optional - used when reflecting to a reflection
isReply: true // optional - used when reflecting to a reflection
createdAt: new Date().toISOString(),
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useSetAppReleaseMutation
Create an application's release
This hook provides the mutation function to create the underlying model's data. It is helpful in creating a release linked to an application.
Example usage
import { useSetAppReleaseMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [setAppRelease, { data, error, loading }] = useSetAppReleaseMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleSetAppRelease = () => {
setAppRelease({
variables: {
i: {
content: {
applicationID: 'applicationId',
version: '0.0.1',
source:'http://someurl',
meta: [
{
provider: 'Extensions App',
property: 'description',
value: 'some description',
},
]
createdAt: new Date().toISOString(),
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useUpdateAppMutation
Update an application
This hook provides the mutation function to update the underlying model's data. It is helpful in removing an application.
Example usage
import { useUpdateAppMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [updateApp, { data, error, loading }] = useUpdateAppMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleRemoveApp = () => {
// call the mutation function
updateApp({
variables: {
i: {
id: 'appId',
content: {},
options: {
shouldIndex: false
}
}
},
onError,
OnCompleted,
...
}).then(resp => {
// ...
}).catch(err => {
// ...
})
}
useUpdateBeamMutation
Update a beam
This hook provides the mutation function to update the underlying model's data. It is helpful in removing a beam.
Example usage
import { useUpdateBeamMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [updateBeam, { data, error, loading }] = useUpdateBeamMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleRemoveBeam = () => {
updateBeam({
variables: {
i: {
id: 'beamId',
content: {
active: false
},
options: {
shouldIndex: false
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useUpdateContentBlockMutation
Update a content block
This hook provides the mutation function to update the underlying model's data. It is helpful in removing a content block.
useUpdateFollowMutation
Update a follow document to a profile
This hook provides the mutation function to update the underlying model's data. It is helpful in updating a profile's followers or following data. The mutation is called only when there is an existing follow document id for the profile. If it does not exist, useCreateFollowMutation should be used instead.
Example usage
import { useUpdateFollowMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [updateFollow, { data, error, loading }] = useUpdateFollowMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
/**
* use this mutation,
* only when there is a follow document id.
*/
const followId = 'followDocumentId';
const handleUpdateFollow = () => {
if (followId) {
updateFollow({
variables: {
i: {
id: followId,
content: {
isFollowing: true, // set to false to unfollow a profile
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
}
useUpdateInterestsMutation
Update an interest or list of interests
This hook provides the mutation function to create the underlying model's data. It is helpful in unsubscribing to topic or list of topics The mutation is called only when there is an existing
tagSubscriptionId
for the given profile. If it does not exist, useCreateInterestsMutation should be used instead.
Example usage
import { useUpdateInterestsMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [updateInterests, { data, error, loading }] = useUpdateInterestsMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
/**
* use this mutation,
* only when there is a tag subscription id.
*/
const tagSubscriptionId = 'tagSubscriptionId';
const handleUpdateInterests = () => {
if (tagSubscriptionId) {
updateInterests({
variables: {
i: {
id: tagSubscriptionId,
content: {
topics: [{
value: 'akasha',
labelType: sdk.services.gql.labelTypes.INTEREST
},
{
value: 'world',
labelType: sdk.services.gql.labelTypes.INTEREST
}
]
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
}
useUpdateProfileMutation
Update a profile data
This hook provides the mutation function to update the underlying model's data. It is helpful in updating a user's profile.
Example usage
import { useUpdateProfileMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [updateProfile, { data, error, loading }] = useUpdateProfileMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleUpdateProfile = () => {
updateProfile({
variables: {
i: {
id: 'profileId',
content: {
nsfw: false,
name: 'Updated Profile',
description: 'this profile is updated',
links: [
{
href: 'http://sociallink10'
},
{
href: 'http://sociallink20'
}
],
avatar: '', // new profile's avatar
background: '', // new profile's cover image
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useUpdateAkashaReflectMutation
Update a reflection to a beam or a beam's reflection
This hook provides the mutation function to create the underlying model's data. It is helpful in editing a reflection to a beam or a beam's reflection.
Example usage
import { useUpdateAkashaReflectMutation } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const [editReflection, { data, error, loading }] = useUpdateAkashaReflectMutation(
{
context: {
source: sdk.services.gql.contextSources.composeDB
},
}
);
const handleEditReflection = () => {
editReflection({
variables: {
i: {
id: 'reflectionId',
content: {
// reflection content is immutable
}
}
},
onError,
OnCompleted,
...
}).then(
// ...
).catch(
// ...
)
}
useUpdateAppReleaseMutation
Update an application's release
useIndexBeamMutation
Index a beam
useIndexContentBlockMutation
Index a content block
useIndexProfileMutation
Index a profile
useIndexReflectionMutation
Index a reflection
Queries - (Standard)
Queries are used to fetch data from the GraphQL API with no resulting changes to the underlying model's data. When initializing a query hook, you can pass to it the required parameters specifying what aspects of the model's data you are interested in. Calling a query returns returns an object from Apollo Client that contains loading, error, and data properties that can be used on the UI.
Queries could be either of Standard
orStream
queries.
Standard
queries provide hooks to access data directly from the model
Type Predicates
Many of the fields returned from the graphql endpoints are optional or the field can be an empty object. This means that typescript will complain if you want to access a field of an empty object. To overcome this issue, and also maintain consistency in usage, the hooks package also contains a set of selectors that can be used as a basis for custom selectors or as an example to help you build your custom selectors and have the same consistency.
The selectors are split into multiple files which are named after the name of the hook it's compatible with.
For example, to get the selectors for a hook named useGetBeamsByIdQuery
you will need import them from the file get-beam-by-id-query
like this:
import { useGetBeamByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import { selectBeamId } from `@akashaorg/ui-core-hooks/lib/selectors/get-beam-by-id-query`;
// selectors operate directly on the hook's data object:
const { data, loading } = useGetBeamsByIdQuery({/*some vars*/});
const beamId = selectBeamId(data); // now typescript will correctly infer the beamId type
This will enhance the readability of the code and reduce field access errors that may occur, if you forget to handle it.
Keep the selectors as simple as possible and don't try to merge or to handle multiple data types in one selector
useGetAppsReleasesQuery
Get a list of application releases.
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables (Only one of the following params)
- first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - filters:
AkashaAppReleaseFiltersInput
- Optional filters to apply to the query - sorting:
AkashaAppReleaseSortingInput
- Optional sorting to apply to the query
Returned data object
When the query executes successfully, the data
object will contain
data.akashaAppReleaseIndex.edges
- an array of application releases nodesdata.akashaAppReleaseIndex.pageInfo
- pagination data
Example usage
import { useGetAppsReleasesQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const { data, loading, error } = useGetAppsReleasesQuery({
variables: {
first: 10,
/**
* specify an application id to filter only
* releases for the particular application
*/
filters: { where: { applicationID: { equalTo: 'id of the application' } } },
sorting: { createdAt: 'DESC' }
},
fetchPolicy: 'cache-first',
notifyOnNetworkStatusChange: true,
});
const releases = data?.akashaAppReleaseIndex?.edges || [];
useGetAppReleaseByIdQuery
Get an application release details using its id.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
).
Required query variables
- id:
string
- the id of the application's release.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the release.
Example usage
import { useGetAppReleaseByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const { data, loading, error } = useGetAppReleaseByIdQuery({
variables: { id: 'releaseId' },
fetchPolicy: 'cache-first', // use this to control caching and improve network requests
notifyOnNetworkStatusChange: true,
// ...
});
const appRelease = useMemo(() => {
if (data?.node && 'id' in data.node) {
return data.node;
}
return null;
}, [data]);
// the 'loading' state can be used to render a spinner;
if (loading) {
return <Spinner/>
}
if (error) {
return <div>Error: {error.message}</div>
}
return (
// do something with 'appRelease'.
// For example, you can get the version like so;
<div>
<p>This release with id: {releaseId} is of version {appRelease?.version}</p>
</div>
)
useGetAppsReleasesByPublisherDidQuery
Get a list of applications using publisher's DID
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables
- id:
string
- the id of the publisher.
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - filters:
AkashaAppReleaseFiltersInput
- Optional filters to apply to the query - sorting:
AkashaAppReleaseSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.akashaAppReleaseList.edges
- an array of application releases nodesdata.node.akashaAppReleaseList.pageInfo
- pagination data
Example usage
import { useGetAppsReleasesByPublisherDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const { data, loading, error } = useGetAppsReleasesByPublisherDidQuery({
variables: {
id: 'id of the publisher',
// ...
},
// ...
});
const applicationsByPublisher = data?.node?.akashaAppReleaseList?.edges || [];
useGetAppsQuery
Get a list of applications
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables (Only one of the following params)
- first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - filters:
AkashaAppFiltersInput
- Optional filters to apply to the query - sorting:
AkashaAppSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.akashaAppIndex.edges
- an array of application nodesdata.akashaAppIndex.pageInfo
- pagination data
Example usage
import { useGetAppsQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const { data, loading, error } = useGetAppsQuery({
variables: {
first: 3,
// ...
},
});
const applications = data?.akashaAppIndex?.edges || [];
useGetAppsByIdQuery
Get a specific application's details using its id
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
).
Required query variables
- id:
string
- the id of the application.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the application.
Example usage
import { useGetAppsByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const { data, loading, error } = useGetAppsByIdQuery({
variables: { id: 'id of the application' },
// ...
});
const extension = useMemo(() => {
if (data?.node && 'id' in data.node) {
return data.node;
}
return null;
}, [data]);
// you can use the 'loading' state to show a spinner
if (loading) {
return <Spinner/>
}
if (error) {
return <div>Error: {error.message}</div>
}
return (
// do something with 'extension'.
// For example, you can get the displayName and releases count like so;
<div>
<p>The application {extension?.displayName} has {extension?.releasesCount} releases</p>
</div>
)
useGetAppsByPublisherDidQuery
Get a list of apps using the publisher's DID
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables (Only one of the following params)
- id:
string
- the id of the application's release.
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - filters:
AkashaAppFiltersInput
- Optional filters to apply to the query - sorting:
AkashaAppSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.akashaAppList.edges
- an array of App nodesdata.node.akashaAppList.pageInfo
- pagination data
Example usage
import { useGetAppsByPublisherDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetAppsByPublisherDidQuery({
variables: {
id: sdk.services.gql.indexingDID,
first: 1, // number of entries to be returned starting from the first. You may also change it to 'last' to start from the last entry.
filters: {
// ...
},
sorting: {
// ...
},
},
});
const applicationsByPublisherDid = data?.node?.akashaAppList?.edges || [];
useGetBeamsQuery
Query a paginated list of "Beams" (posts) with optional filtering and sorting.
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables (Only one of the following params)
- first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - filters:
AkashaBeamFiltersInput
- Optional filters to apply to the query - sorting:
AkashaBeamSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.akashaBeamIndex.edges
- an array of Beam nodesdata.akashaBeamIndex.pageInfo
- pagination data
Example Usage
import { useGetBeamsQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const BeamList = () => {
const { data, loading, error, fetchMore } = useGetBeamsQuery({
variables: {
first: 10, // fetches first 10 beams
// NOTE: SortOrder enum should be imported from `@akashaorg/typings/lib/sdk/graphql-operation-types-new`
sorting: { createdAt: SortOrder.DESC}
}
});
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const beams = data?.akashaBeamIndex?.edges || [];
return (
<div>
{beams.map((edge) => (
<div key={edge?.node?.id}>
<h2>{edge?.node?.content[0]?.blockID}</h2>
<p>Author: {edge?.node?.author.id}</p>
</div>
))}
{/* Pagination example */}
<button
onClick={() => fetchMore({ variables: { after: data.akashaBeamIndex?.pageInfo.endCursor } })}
>
Load More
</button>
</div>
);
};
useGetBeamByIdQuery
Get a specific beam from list of beams using its id
Required query variables
- id:
string
- the id of the beam.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the beam.
Example usage
import { useGetBeamByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const beamId = 'id of the beam'
const { data, loading, error } = useGetBeamByIdQuery({
variables: { id: beamId },
skip: !beamId, // this hook will not execute when beamId is not defined
// ...
});
// we can check if a beam is active like so;
const isBeamActive = useMemo(() => {
if (data?.node && 'active' in data.node) {
return data.node.active;
}
return null;
}, [data]);
It is important to check and compare received data fields against useGetBeamStreamQuery which has the current indexed version of the beam.
useGetBeamsByAuthorDidQuery
Get a list of beams using author's DID.
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables
- id:
string
- the id of the publisher.
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - filters:
AkashaBeamFiltersInput
- Optional filters to apply to the query - sorting:
AkashaBeamSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.akashaBeamListCount
- a count of the list of beams returneddata.node.isViewer
- true, if the author DID is same as authenticated DID.data.node.akashaBeamList.edges
- an array of App nodesdata.node.akashaBeamList.pageInfo
- pagination data
Example Usage
import { useGetBeamsByAuthorDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetBeamsByAuthorDidQuery({
variables: {
id: 'DID of the beam author',
},
// ...
});
const beamsByAuthorDid = data?.node?.akashaBeamList?.edges || [];
useGetContentBlockByIdQuery
Get a specific content-block by its id.
A Beam (post) in AKASHA Core is composed from a list of content-blocks (learn more in the content-blocks section of the documentation)
Query Variables (Required):
- id:
string
- the id of the content block (usually obtained from a beam query)
Returned data object
If the query is successful, the data
object will contain
data.node
- Content block details
Example Usage
import { useGetContentBlockByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const MyComponent = () => {
const {} = useGetContentBlockByIdQuery({
variables: {
id: 'some-content-block-id'
}
});
if (loading) return <div>Loading...</div>;
if (error) return <div>Error! {error.message}</div>;
const contentBlock = data?.node;
if (!contentBlock || 'id' in contentBlock === false) {
return <div>Block not found</div>;
}
return (
<div>{contentBlock.author.id}</div>
)
}
useGetBlockStorageByIdQuery
A hook to get the block storage of a content-block.
Required query variables
- id:
string
- content block's id.
Content block storage functionality is not being used at the moment.
useGetFollowDocumentsByDidQuery
Get the list of follow relationship documents between the id
and the following
field DIDs. This query is used to check if a user's profile DID follows another's.
If there is no document created expressing the relationship, the result is null (or empty), then the follow document should be created first using useCreateFollowMutation. If the document is already created then it can be updated using useUpdateFollowMutation.
Required query variables
- id:
string
- DID of the user you want to query. - following:
string[]
- list of DIDs to check against
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - sorting:
AkashaFollowSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.akashaFollowList.edges
- an array of application nodesdata.akashaFollowList.pageInfo
- pagination data
Example Usage
import { useGetFollowDocumentsByDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const MyComponent = () => {
const { data, error } = useGetFollowDocumentsByDidQuery({
fetchPolicy: 'cache-and-network',
variables: {
id: 'did-of-the-logged-in-profile',
following: ['other-profile-did'],
last: 1,
},
});
if (data?.node?.akashaFollowList?.edges[0].node.isFollowing) {
return (
<div>Already Following</div>
<button onClick={updateFollow}>Unfollow</button>
)
}
return (
<div>
Never followed before
<button onClick={createFollow}></button>
</div>
)
}
useGetFollowersListByDidQuery
Get a paginated list of followers for a specific profile DID
Required query variables
- id:
string
- DID of the user you want to query - first:
number
- number of elements to include from the start of the list - last:
number
- number of elements to include from the end of the list
You need to include either first
or last
variables in your query but not both
Optional query variables
- after: string - Cursor for pagination (returns nodes after this id)
- before: string - Cursor for pagination (returns nodes after this id)
- sorting:
AkashaFollowInterfaceSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.isViewer
- true, if the author DID is same as authenticated DID.data.node.akashaProfile.followers.edges
- an array of profiles nodesdata.node.akashaProfile.followers.pageInfo
- pagination data
Example usage
import { useGetFollowersListByDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const FollowersPaginatedList = ({profileDID, isLoggedIn}) => {
const { data, loading, error, fetchMore } = useGetFollowersListByDidQuery({
fetchPolicy: 'cache-first',
variables: {
id: profileDID,
first: 10,
},
skip: !isLoggedIn,
notifyOnNetworkStatusChange: true,
});
if (loading) return <div>Loading...</div>;
if (error) return <div>Error loading data</div>;
return (
<div>
{data.node.akashaProfile?.followers?.edges.map(followEdge => {
// to get the profile data,
// use useGetProfileByIdQuery passing the
// akashaProfile.id from below
return (
<div key={followEdge.node?.did?.akashaProfile?.id}>
{followEdge.node?.did?.akashaProfile?.id}
</div>
)
})}
<button onClick={() =>
fetchMore({
variables: {
after: data.node.akashaProfile?.followers?.pageInfo.endCursor
}
})}>Load More</button>
</div>
);
}
useGetFollowingListByDidQuery
Get a paginated list of profiles that a specific DID follows
Required query variables
- id:
string
- DID of the profile to get following list from - first:
number
- number of elements to include from the start of the list - last:
number
- number of elements to include from the end of the list
You need to include either first
or last
variables in your query but not both
Optional query variables
- after: string - Cursor for pagination (returns nodes after this id)
- before: string - Cursor for pagination (returns nodes after this id)
- sorting:
AkashaFollowInterfaceSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.isViewer
- true, if the author DID is same as authenticated DID.data.node.akashaFollowList.edges
- an array of profiles nodesdata.node.akashaFollowList.pageInfo
- pagination data
Example usage
import { useGetFollowingListByDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const FollowingList = ({ profileDID }) => {
const { data, loading, error, fetchMore } = useGetFollowingListByDidQuery({
variables: {
id: profileDID,
first: 10,
},
fetchPolicy: 'cache-first',
});
if (loading) return <div>Loading...</div>;
if (error) return <div>Error loading following list</div>;
return (
<div>
{data?.node?.akashaProfile?.following?.edges.map(edge => (
<div key={edge.node?.did?.akashaProfile?.id}>
{edge.node?.did?.akashaProfile?.name}
</div>
))}
{data?.node?.akashaProfile?.following?.pageInfo.hasNextPage && (
<button
onClick={
() => fetchMore({
variables: {
after: data.node.akashaProfile?.following?.pageInfo.endCursor
}
})
}
>
Load More
</button>
)}
</div>
);
};
useGetInterestsByDidQuery
Fetch the interests (tags), a specific DID is subscribed to.
Required query variables
- id:
string
- DID of the profile to get interests for.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the beam.
Example usage
import { useGetInterestsByDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const InterestsList = ({ profileDID }) => {
const { data, loading, error } = useGetInterestsByDidQuery({
variables: {
id: profileDID,
},
fetchPolicy: 'cache-first',
});
if (loading) return <div>Loading...</div>;
if (error) return <div>Error loading interests</div>;
return (
<div>
{data?.node?.akashaProfile?.interests?.map(interest => (
<div key={interest.id}>
{interest.label}
</div>
))}
</div>
);
};
useGetInterestsByIdQuery
Get interests by its id
Required query variables
- id:
string
- DID of the profile to get interests for.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the beam.
This hook is not currently in use.
useGetInterestsQuery
Get a list of interests
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables (Only one of the following params)
- first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id)
Returned data object
If the query is successful, the data
object will contain
data.akashaProfileInterestsIndex.edges
- an array of interests nodesdata.akashaProfileInterestsIndex.pageInfo
- pagination data
This hook is not currently in use.
useGetMyProfileQuery
Get a logged user's profile
Returned data object
If the query is successful, the data
object will contain
data.viewer.akashaProfile
- profile detaila for logged user
This hook is not currently in use.
useGetProfileByDidQuery
Get a profile using its Decentralized ID (DID).
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
).
Required query variables
- id:
string
- the did of the profile.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the profile.
Example usage
import { useGetProfileByDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const profileDID = 'DID of the profile being queried'
const { data, loading, error } = useGetProfileByDidQuery({
variables: {
id: profileDID,
},
})
const profile = data.node.akashaProfile || null
useGetProfileByIdQuery
Get a profile using its id
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
).
Required query variables
- id:
string
- the id of the profile.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the profile.
Example usage
import { useGetProfileByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const profileID = 'id of the profile being queried'
const { data, loading, error } = useGetProfileByIdQuery({
variables: {
id: profileID,
},
});
const profile = data.node || null
useGetProfileStatsByDidQuery
Gets the stats (number of beams, interests, followers and following) for a give profile.
Required query variables
- id:
string
- the id of the profile.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the profile's stats.
Example usage
import { useGetProfileStatsByDidQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const profileID = 'id of the profile being queried'
const { data, loading, error } = useGetProfileStatsByDidQuery({
variables: {
id: profileID,
},
});
const followCount = data.node.akashaFollowListCount
const beamCount = data.node.akashaBeamListCount
const reflectCount = data.node.akashaReflectListCount
useGetProfilesQuery
Get a list of profiles
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables (Only one of the following params)
- first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - filters:
AkashaProfileFiltersInput
- Optional filters to apply to the query - sorting:
AkashaProfileSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.akashaProfileIndex.edges
- an array of profile nodesdata.akashaProfileIndex.pageInfo
- pagination data
This hook is not currently in use.
useGetReflectReflectionsQuery
Get list of reflections to a specific reflection
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables
- id:
string
- the id of the reflection.
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - sorting:
AkashaReflectSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.akashaReflectIndex.edges
- an array of application nodesdata.akashaReflectIndex.pageInfo
- pagination data
Example usage
import { useGetReflectReflectionsQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const reflectionId = 'id of the reflection'
const { data, loading, error } = useGetReflectReflectionsQuery({
variables: {
id: reflectionId,
first: 5 // number of reflections to be returned in the data
},
// ...
});
// the reflections can be read from the data like so;
const reflections = data?.akashaReflectIndex?.edges || []
useGetReflectionByIdQuery
Get a specific reflection using its id
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
).
Required query variables
- id:
string
- the id of the application's release.
Returned data object
When the query executes successfully, the data
object will contain a node
which has all the information regarding the reflection.
Example usage
import { useGetReflectionByIdQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const reflectionId = 'id of the reflection'
const { data, loading, error } = useGetReflectionByIdQuery({
variables: { id: reflectionId },
skip: !reflectionId, // this hook will not execute when reflectionId is not defined
// ...
});
const reflection = data.node
useGetReflectionsByAuthorDidQuery
Get reflections by a given author using their did.
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables
- id:
string
- the id of the application's release.
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - filters:
AkashaReflectFiltersInput
- Optional filters to apply to the query - sorting:
AkashaReflectSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.akashaReflectList.edges
- an array of reflection nodesdata.node.akashaReflectList.pageInfo
- pagination data
This hook is not currently in use.
useGetReflectionsFromBeamQuery
Get reflections for a given beam using its id.
- Pagination uses Relay-style cursor pagination.
- Returns a query object having the standard Apollo useQuery shape (
data
,loading
,error
, and helper methods likefetchMore
)
Required query variables
- id:
string
- the id of the application's release.
Optional query variables
- after:
string
- Cursor for pagination (returns nodes after this id) - before:
string
- Cursor for pagination (returns nodes before this id) - first:
number
- Number of items (nodes) to fetch from the start of the list - last:
number
- Number of items (nodes) to fetch from the end of the list - filters:
AkashaReflectInterfaceFiltersInput
- Optional filters to apply to the query - sorting:
AkashaReflectInterfaceSortingInput
- Optional sorting to apply to the query
Returned data object
If the query is successful, the data
object will contain
data.node.reflectionsCount
- number of reflectionsdata.node.reflections.edges
- an array of reflection nodesdata.node.reflections.pageInfo
- pagination data
This hook is not currently in use.
Queries - (Indexed Streams)
In order to avoid hitting the ceramic node for every query, to speed up the query execution and enable advanced filtering capabilites some hooks have a StreamQuery
version. Since this is a different service, provided by AKASHA, these hooks require an extra field called indexer
. The functionality of hooks with the StreamQuery
suffix is almost identical to the non suffixed counterparts.
You can identify if a hook has an indexed version by trying to import it from the @akashaorg/ui-core-hooks/lib/generated/apollo
package.
Example
useGetAppsQuery
=>useGetAppsStreamQuery
useGetContentBlockQuery
=>useGetContentBlockStreamQuery
StreamQuery
suffixed hooks provides access to data from the indexing service. For this reason, sometimes it may exhibit a delay between the data that is already in the Ceramic node and the indexing service. This delay should not be noticeable by the end user but it may require additional logic when doing a mutation and expecting the data to be immediately available.
useGetIndexedStreamQuery
A hook that supports advanced querying capabilities through the filtering field. One of the main usecases at the moment is to query the beams published using a specific tag.
Required query variables
- indexer: string - the indexing service to use (ex: sdk.services.gql.indexingDID)
- first: string - number of items from the start of the list
- last: string - number of items from the end of the list
- filters: AkashaIndexedStreamFiltersInput - filters to apply to the query
Optional query variables
- sorting: object - sorting to be aplied to the elements
There are only a few use-cases in which this hook is needed. In general we prefer to use more specific hooks.
Example usage
import getSDK from '@akashaorg/awf-sdk';
import { AkashaIndexedStreamStreamType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
import {useGetIndexedStreamQuery} from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const BeamListForTag = ({tagName}) => {
const { data, loading, error } = useGetIndexedStreamQuery({
variables: {
indexer: getSDK().services.gql.indexingDID
first: 10,
filters: {
and: [
{ where: { streamType: { equalTo: AkashaIndexedStreamStreamType.Beam }}},
{ where: { indexType: { equalTo: temp1.services.gql.labelTypes.TAG }}},
{ where: { indexValue: { equalTo: 'akasha' }}}
]
}
}
});
const beamIds = data.node.akashaIndexedStreamList.edges.map(edge => edge.node.stream);
// now we can use beamIds to get the beam data for each of the beams it contains
// using useGetBeamStreamQuery or useGetBeamQuery
return (
<div>
<h3>Beam Ids containing the akasha tag:</h3>
{ beamIds.map(beamId => <div key={beamId}>{beamId}</div>) }
</div>
);
}
useGetIndexedStreamCountQuery
A hook that supports advanced querying capabilities through filters
field that returns the number of elements that matches the query. Useful when you want to show how many items are matching the queries, without having to get the entire data.
Required query variables
- indexer: string - the indexing service to use (ex: sdk.services.gql.indexingDID)
- filters: AkashaIndexedStreamFiltersInput - filters to apply to the query
Example usage
import getSDK from '@akashaorg/awf-sdk';
import { AkashaIndexedStreamStreamType } from '@akashaorg/typings/lib/sdk/graphql-types-new';
import {useGetIndexedStreamCountQuery} from '@akashaorg/ui-core-hooks/lib/generated/apollo';
const BeamListForTag = ({tagName}) => {
const { data, loading, error } = useGetIndexedStreamCountQuery({
variables: {
indexer: getSDK().services.gql.indexingDID
filters: {
and: [
{ where: { streamType: { equalTo: AkashaIndexedStreamStreamType.Beam }}},
{ where: { indexType: { equalTo: temp1.services.gql.labelTypes.TAG }}},
{ where: { indexValue: { equalTo: 'akasha' }}}
]
}
}
});
return (
<div>
<div>akasha tag has {data.node?.akashaIndexedStreamListCount} beams</div>
</div>
);
}
useGetAppsStreamQuery
Get a list of apps from the indexing service
Using the filters param, this hook can be used to read the most recently indexed version of an application from list of all apps.
Example usage
import { useGetAppsStreamQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetAppsStreamQuery({
variables: {
indexer: sdk.services.gql.indexingDID,
first: 1,
filters: {
where: {
applicationID: {
equalTo: 'id of the application',
}
}
},
},
});
useGetBeamStreamQuery
Get a list of beams from the indexing service
Using the filters param, this hook can be used to read the most recently indexed version of a beam from list of all beams.
Example usage
import { useGetBeamStreamQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetBeamStreamQuery({
variables: {
indexer: sdk.services.gql.indexingDID,
filters: {
where: {
beamID: {
equalTo: 'id of the beam',
}
}
},
last: 1,
},
});
useGetInterestsStreamQuery
Get a list of interests from the indexing service
Using the filters param, this hook can be used to read the most recently indexed version of an interest from list of all interests.
Example usage
import { useGetInterestsStreamQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetInterestsStreamQuery({
variables: {
indexer: sdk.services.gql.indexingDID,
filters: {
where: {
interestID: {
equalTo: 'id of the interest',
}
}
},
last: 1,
},
});
useGetProfileStreamQuery
Get a list of profiles from the indexing service
Using the filters param, this hook can be used to read the most recently indexed version of a profile from list of all profiles.
Example usage
import { useGetProfileStreamQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetProfileStreamQuery({
variables: {
indexer: sdk.services.gql.indexingDID,
filters: {
where: {
profileID: {
equalTo: 'id of the profile',
}
}
},
last: 1,
},
});
useGetReflectionStreamQuery
Get a list of reflections from the indexing service
Using the filters param, this hook can be used to read the most recently indexed version of a reflection from list of all reflections.
Example usage
import { useGetReflectionStreamQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const sdk = getSDK();
const { data, loading, error } = useGetReflectionStreamQuery({
variables: {
indexer: sdk.services.gql.indexingDID,
filters: {
where: {
reflectionID: {
equalTo: 'id of the reflection',
}
}
},
last: 1,
},
});
useGetContentBlockStreamQuery
A generated hook to get a paginated list of content-blocks.
Required query variables
- indexer: string - the indexing service to use (ex: sdk.services.gql.indexingDID)
- first: number - number of items to return from the start of the list
- last: number - number of items to return from the end of the list
Optional query variables
- filter: object - filtering to be applied to the query
- sorting: object - sorting to be applied to the query
A beam can contain 1 or more content-blocks. This hook only returns content-block's id which should be used with useGetContentBlockByIdQuery hook to get the actual block data
Example usage
import { useGetContentBlockStreamQuery } from '@akashaorg/ui-core-hooks/lib/generated/apollo';
import getSDK from '@akashaorg/awf-sdk';
const ContentBlockList = () => {
const { data, loading, error, fetchMore } = useGetContentBlockStreamQuery({
variables: {
indexer: getSDK().services.gql.indexingDID,
first: 10,
}
});
const blockIds = data.node?.akashaContentBlockStreamList?.edges?.map(edge => edge.node.blockID)
// now we can use the blockIds to fetch the content-block's data using
// useGetContentBlockByIdQuery hook
return (
<div>
<h3>Latest content blocks</h3>
{blockIds.map(id => <div key={id}>{id}</div>)}
</div>
)
}