Skip to main content

Create Post

createPost mutation is used to create a new post in a space. It takes spaceId and CreatePostInput as inputs.

Each post has a type which defines the fields of it. You can use postTypes query to retrieve the available post types in your community.

postTypes(limit: 10) {
nodes {
id
name
mappings {
key
type
required
}
}
}

mapping field in postType defines the fields of the posts with this type. It is an array of PostTypeMapping. The important attributes of it are key, type, and required.

  • key: the name of this field used to identify it
  • type: the type of this field can be one of PostMappingTypeEnum
  • required: indicate whether this field is required when creating a post

An example of a postType can be:

{
"id": "YP4thX1J1SMMsuw",
"name": "Discussion",
"mappings": [
{
"key": "title",
"type": "text",
"required": null
},
{
"key": "content",
"type": "html",
"required": true
},
{
"key": "previewImageId",
"type": "image",
"required": null
}
]
}

This is the post type for discussion. It has 2 required fields, title and content. title should have a text value but content can contain html. It also has a non-required field, previewImageId, whose type is image.

Create a post#

To create a post you need to define its post type. We will use the discussion post type mentioned above. The value of the fields (i.e. title and content) is passed in the mappingFields. The value should be a valid stringified json object. Typically, in JS you can use JSON.stringify().

mutation {
createPost(
spaceId: "0CXG3DhjnlRZ",
input: {
postTypeId: "YP4thX1J1SMMsuw"
mappingFields: [
{
key: "title"
type: text
value: "\"Get started by introducing yourself in the Community\""
},
{
key: "content"
type: html
value: "\"<p>Introduce yourself, spark connections and conversation, and welcome other Tribe Campfire Community members as we continue to grow.</p>\""
}
]
publish: true
}
) {
id
}
}

Reply to Post#

createReply mutation is used to reply to a post. It takes postId and CreatePostInput as inputs.

For example, we can reply with a comment on the post we created above. The post type of comment is this.

{
"id": "XSaq81Sedx2pe4R",
"name": "Comment",
"mappings": [
{
"key": "content",
"type": "html",
"required": true
},
{
"key": "previewImageId",
"type": "image",
"required": null
}
]
}

Now we can create a reply using this post type.

mutation {
createReply(postId: "3ReqMxgxaF9YXPQ", input: {
postTypeId: "XSaq81Sedx2pe4R",
mappingFields: [
{
key: "content"
type: html
value: "\"<p>Hello! I'm Siavash, CEO at Tribe.</p>\""
}
]
publish: true
}) {
id
}
}

Create Post with Attachments#

To create a post with attachments you have to first upload the attachments using upload files. Then you can pass the ids of the files as attachmentIds.

mutation {
createPost(
spaceId: "0CXG3DhjnlRZ",
input: {
postTypeId: "XSaq81Sedx2pe4R"
mappingFields: [
{
key: "content"
type: html
value: "\"<p>This is the content</p>\""
}
]
publish: true
attachmentIds: ["GFfd6sdfgG", "Zn92Jdofd"]
}
) {
id
}
}

Create Post with Embedded Image#

To embed images in the post first you need to upload images. Then you can use the mediaUrl and mediaId of the uploaded images to create the html element below and embed it in the content of the post.

<figure data-type="image">
<img src="{mediaUrl}" data-id="{mediaId}">
</figure>

Then the final code to create the post will be similar to this.

note

Don't forget that you have to use JSON.stringify() for the value field.

mutation {
createPost(
spaceId: "0CXG3DhjnlRZ",
input: {
postTypeId: "XSaq81Sedx2pe4R"
mappingFields: [
{
key: "content"
type: html
value: "\"<figure data-type=\\\"image\\\"><img src=\\\"https://tribe-development.imgix.net/h1hx1o8Uu0xilwf2Vqhp6?w=1000&amp;auto=compress,format&amp;dl\\\" data-id=\\\"h1hx1o8Uu0xilwf2Vqhp6\\\"></figure>\""
}
]
publish: true
}
) {
id
}
}

Create Post with Embedded Video(s)#

To embed videos in the post first you need to upload them. Then you can use the mediaUrl and mediaId of the uploaded images to create the html element below and embed it in the content of the post.

<video src="{mediaUrl}" data-id="{mediaId}">
Your browser does not support the video element.
</video>

Then the final code to create the post will be similar to this.

note

Don't forget that you have to use JSON.stringify() for the value field.

mutation {
createPost(
spaceId: "0CXG3DhjnlRZ",
input: {
postTypeId: "XSaq81Sedx2pe4R"
mappingFields: [
{
key: "content"
type: html
value: "\"<video data-id=\\\"6FZXyWeJuymo4olaTOgyp\\\" controls=\\\"true\\\" src=\\\"https://files.dev.t-cdn.net/files/6FZXyWeJuymo4olaTOgyp\\\">Your browser does not support the video element.</video>\""
}
]
publish: true
}
) {
id
}
}

Similarly, you can use the same approach to embed anything else (e.g. audio) to the posts.

Create Post with Embedded Links#

You can embed links in the post, for example, a YouTube video. To do so you have to first use embed query and provide the link you want to embed. Then you can create the html below with the id and url of the embed and embed it in the content of the post.

<div data-type="embed" data-id="{embed.id}" data-embed-url="{embed.url}">
</div>

Then the final code to create the post will be similar to this.

note

Don't forget that you have to use JSON.stringify() for the value field.

mutation {
createPost(
spaceId: "0CXG3DhjnlRZ",
input: {
postTypeId: "XSaq81Sedx2pe4R"
mappingFields: [
{
key: "content"
type: html
value: "\"<div data-type=\\\"embed\\\" data-id=\\\"BCvHaomcZ1pFYU2xd0MG3\\\" data-embed-url=\\\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\\\"></div>\""
}
]
publish: true
}
) {
id
}
}