AppGyver Prismic.io integration

Hi Community,

I’m a newbie in setting up API integrations and I would really appreciate if someone could help me with connecting AppGyver with Prismic.io

https://prismic.io/docs/rest-api/basics/introduction-to-the-content-query-api

I’d like to just get 1 unique content as a repsonse. I understand that I need to use Prismic’s {uid} as the id in the query, but apart from that I’m pretty lost at how to do this. Would anyone have time to give a API and Appgyver a step by step guide on how to set this up?

Hi everyone,

as a newbie to REST API’s I would really appreciate if someone would have the time to show me how to get dynamic content from Prismic to a Appgyver app-page

  1. Intergrate Appgyver to Prismic
  2. Get the content for a specific page (e.g. prismic content UID = “home page”)
  3. Set the fetched content into different appgyver elements:
    Prismic title cotent = Appgyver Heading
    Prismic paragraph = Appgyver Paragraph
    Prismic picture = Appgyver picture frame

If anyone who is more familar with API’s and Appgyver could help out I would be very very thankful :slight_smile:

Cheers

Hi there!

First off, I will admit that I’m not an expert with Prismic, but I tried to compile a quick guide to get you started on the AppGyver side!

So starting with Prismic REST API documentation, we know that we can query content from the api like this:
https://ag-api-test.cdn.prismic.io/api/v1/documents/search?ref=PRISMIC_MASTER_REF&q=[[at(my.article.uid, "my-article")]]

With this we can head off to “Data” found from the Global toolbar in the app editor.
Here we can click “Add data resource” and then choose “REST API direction integration”.

Now the rest is a matter of configuring the REST integration with the information we have from the Prismic API.
The example URL from above should be broken up like this:

The base resource URL

https://ag-api-test.cdn.prismic.io/api/v1/documents/search

The Prismic master ref passed as a parameter called ‘ref’

?ref=PRISMIC_MASTER_REF

And finally the content query passed as a parameter called ‘q’.

&q=[[at(my.article.uid, "my-article")]]

The following images demonstrate how to set this up in the data configurator. You can also test that you’re getting responses from the Prismic API in the ‘Test’-tab.


Finally we can head off to variables panel where we will add a data variable that uses the data resource we just set up. For this example I’m passing the Prismic content query as a static string.

Following these steps you should now have the result from the content query available in your data variable.

The data object you get from Prismic by default is not the most straightforward, but in my example I was able to access the “title” property of my “article” content type like so:

data.prismic.results[0].data.article.title.value[0].text

Hi @Akseli_Virtanen

first of all thanks so much for taking your time to help out!

I’m still having some problems, so a few followup questions

  1. in the 1st screenshot - is the value you put in PRISMIC_MASTER_REF actually the master token that one can get from Prismic? I’m assuming Appgyver automatically adds the “?” to the API-call, so I don’t have to put that anymore
  2. if the value of ref is PRISMIC_MASTER_REF, where do I put the token value in Appgyver? Should this be some global app variable
  3. where do I add the q (Query) [[at(my.article.uid, “my-article”)]]?

@Ari-Pekka_FI
1 & 2. Understandable confusion! So indeed, I meant to replace PRISMIC_MASTER_REF with the master token you get from Prismic (I got it from the API browser). And yes the “?” is part of the URL scheme, which is taken care of by AppGyver, so no need to input that anywhere :slight_smile:

  1. In the first part of this setup (images 1&2) we create a data resource via the “data” section. In the 3rd image I’ve created a data variable via the variable menu. Since we told AppGyver that our data resource has a parameter called “Query” (image 2) for the “GET record”-method, it is now possible for the data variable to suggest us this parameter! Then I input the content query [[at(my.article.uid, "my-article")]] as the value. This enables you to have multiple data variables with different queries (and of course you could determine the value from a Formula etc.).

I attached another image of the final step:

Hope this helps!

Got the integration working wuhuu. Still one stupid question (sorry)
This is my example prismic data

{

* page: 1
* results_per_page: 20
* results_size: 1
* total_results_size: 1
* total_pages: 1
* next_page: null
* prev_page: null
* -

results: [
  * -

{
    * id: "XiS9BRAAACUAg_Cp"
    * uid: "test-page"
    * type: "page"
    * href: https://vlrepotest.cdn.prismic.io/api/v1/documents/search?ref=Xt8xrhIAACQAWKIn&q=%5B%5B%3Ad+%3D+at%28document.id%2C+%22XiS9BRAAACUAg_Cp%22%29+%5D%5D
    * tags: [ ]
    * first_publication_date: "2020-01-19T20:35:18+0000"
    * last_publication_date: "2020-06-07T15:31:12+0000"
    * -

-

slugs: [
      * "test"]
    * linked_documents: [ ]
    * lang: "fi"
    * alternate_languages: [ ]
    * -

-

data: {
      * -

-

page: {
        * -

-

page__title: {
          * type: "StructuredText"
          * +

-

value: [
            * -

-

{
              * type: "heading1"
              * text: "TEST"
              * spans: [ ]}]}
        * -

-

page_subtitle: {
          * type: "StructuredText"
          * -

-

value: [
            * -

-

{
              * type: "heading2"
              * text: "for a new VL headless cms"
              * spans: [ ]}]}
        * -

-

hero_image: {
          * type: "Image"
          * -

-

value: {
            * +

… 

-

main: {}
            * views: { }}}
        * -

-

social_media_image: {
          * type: "Image"
          * -

-

value: {
            * -

-

main: {
              * +

… 

-

dimensions: {}
              * alt: null
              * copyright: null
              * url: https://images.prismic.io/vlrepotest/d8e5b99a-b404-4d69-ae29-e3f381588e1f_VL+mobile+payment+selection.png?auto=compress,format&rect=0,475,2000,1050&w=1200&h=630}
            * views: { }}}
        * -

-

page_content: {
          * type: "StructuredText"
          * -

-

value: [
            * -

-

{
              * type: "heading1"
              * text: "Hello world!"
              * spans: [ ]}
            * -

-

{
              * type: "paragraph"
              * text: "this would be the content of our page.."
              * spans: [ ]}]}}}}]
* version: "8991d98"
* license: "All Rights Reserved"

}

To use the data, I need to use Appgyvers formula when I for example want to get

  • title and paragraph out from the JSON.?

Could you confirm if my formulas are correct, as I’m getting the same value out all the time
data.prismic.results[0].data.page.page_title.value[0].text
data.prismic.results[0].data.page.page_content.value[1].text

I seem to get only the text "all rights reserved out

Thanks so much @Akseli_Virtanen for all your help. You rock!

Hi again,

for some reason, the GET function stopped working and I can’t understand why.

When I test the connection with get Collection → I get a response. So I’m pretty sure I have the ref value correct :slight_smile:

then when I try to get the schema with Get Record this happens:


I’ve tested the call that this should make in the browser and I get a reply. Where could the issue be?

Sorry for asking so many questions here.

Can you open the Web Inspector with Cmd+Opt+I to see what full error is? Alternatively, if you give us permission, we can take a peek at your app itself and debug it a bit further on our end.