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 Bettermode 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 Bettermode.</p>\""
      }
    ]
    publish: true
  }) {
    id
  }
}

Pin a Reply to Post​

pinReplyToPost mutation is used to pin a reply to a post. It takes postId and replyId as inputs.

mutation {
  pinReplyToPost(postId: "3ReqMxgxaF9YXPQ", replyId: "OMEm3CiW3Ycddp7") {
    status
  }
}

When a reply is pinned to a post it will update the pinnedInto in the post query, and also pinnedReplies returns all the replies that to a certain post.

note

One of the use cases for pinnedReplies is to show best answer or highlight a reply to specific post. At the moment, only one reply can be pinned into specific post.

Unpin a Reply from Post​

unpinReplyFromPost mutation is used to unpin a reply from a post. It takes postId and replyId as inputs.

mutation {
  unpinReplyFromPost(postId: "3ReqMxgxaF9YXPQ", replyId: "OMEm3CiW3Ycddp7") {
    status
  }
}

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