Skip to main content

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.

info

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.

info

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.

tip

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 like fetchMore)

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 nodes
  • data.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 like fetchMore)

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 nodes
  • data.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 like fetchMore)

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 nodes
  • data.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 like fetchMore)

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 nodes
  • data.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 like fetchMore)

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 nodes
  • data.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]);
tip

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 like fetchMore)

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 returned
  • data.node.isViewer - true, if the author DID is same as authenticated DID.
  • data.node.akashaBeamList.edges - an array of App nodes
  • data.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.
info

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.

info

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 nodes
  • data.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
info

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 nodes
  • data.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
info

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 nodes
  • data.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.

info

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 like fetchMore)

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 nodes
  • data.akashaProfileInterestsIndex.pageInfo - pagination data
info

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
info

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 like fetchMore)

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 nodes
  • data.akashaProfileIndex.pageInfo - pagination data
info

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 like fetchMore)

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 nodes
  • data.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 like fetchMore)

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 nodes
  • data.node.akashaReflectList.pageInfo - pagination data
info

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 like fetchMore)

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 reflections
  • data.node.reflections.edges - an array of reflection nodes
  • data.node.reflections.pageInfo - pagination data
info

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
info
  • 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
info

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
info

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>
)
}