Developer Notes

Welcome to the saf-site-frontend wiki! Provided will be a collection of notes for developers related to development of the frontend.

Creating GraphQL Call

1. Ensure that GraphQL query file has been created under ~/queries (See example below for FAQ query)

• NOTE: This FAQ query uses a filter (i.e., (sort: "question_number:asc")) that may not be needed or relevant to your query.

query FAQs{
  faqs(sort: "question_number:asc"){
    data{
      id
      attributes{
        question_number
        question
        answer
      }
    }
  }
} 

2. In the script tags at the end of your Vue file make sure you have a data field to hold the GraphQL response, the method for the GraphQL call, and ensure that the method is being called in the mounted as $nextTick (See example below from faqs)

<script>
export default {
  data() {
    return {
      faqs: {},
    };
  },
  mounted() {
    this.$nextTick(async () => {
      await this.getFAQs()
    });
  },
  methods: {
    async getFAQs() {
      this.faqs = await useAsyncData('getAllFAQs', () => GqlFAQs())
        .then(({ data }) => {
          return data._value.faqs.data.map((faq) => ({
            questionNumber: faq.attributes.question_number,
            question: faq.attributes.question,
            answer: faq.attributes.answer,
          }))
        });
    },
  } 
}
</script>

3. In the above example "getAllFAQs" refers to the name given to the GraphQL file in ~/queries and "GqlFAQs" is "Gql" + the name given to the GraphQL query inside the query file itself