Обновить предварительно загруженные данные с помощью Sapper - PullRequest
Новая
       65

Обновить предварительно загруженные данные с помощью Sapper

1 голос
/ 02 ноября 2019

В настоящее время я изучаю Sapper и интегрирую его с сервисом GraphQL.

Чтобы начать с простого, я создал страницу часто задаваемых вопросов с простым списком вопросов / ответов и формой создания. 

<script context="module">
  import graphql from '../graphql';
  import gql from 'graphql-tag';

  export function preload({ params, query }) {
    const graphQuery = gql`
      {
        faqEntries {
          question,
          answer
        }
      }
    `;

    return graphql.request(graphQuery).then((data) =>  data);
  }
</script>

<script>
  import title from './title';
  import Input from '../components/form/Input';
  import Button from '../components/Button';

  export let faqEntries;

  const newEntry = {
    question: '',
    answer: '',
  };

  const addEntry = () => {
    console.log(newEntry);
    graphql.request(gql`
      mutation {
        createFaqEntry(
          question: "${newEntry.question}"
          answer: "${newEntry.answer}"
        ) {
          id
          question
          answer
        }
      }
    `).then((data) => {
      console.log(data);
      newEntry.question = '';
      newEntry.answer = '';
    })
  }
</script>

<svelte:head>
  <title>{title('Foire aux questions')}</title>
</svelte:head>

<section class="container">
  <h1>Foire aux questions</h1>

  <form on:submit|preventDefault>
    <Input id="question" label="Question" bind:value={newEntry.question} />
    <Input id="answer" label="Réponse" bind:value={newEntry.answer} />
    <Button on:click={addEntry} >Ajouter une entrée</Button>
  </form>

  {#each faqEntries as faqEntry}
    <div class="py-4">
      <h4>{faqEntry.question}</h4>
      <p>
        {faqEntry.answer}
      </p>
    </div>
  {/each}
</section>

Текущий скрипт отлично работает, позволяя мне добавлять записи FAQ прямо из закодированной формы.

Теперь я хотел бы обновить список записей FAQ, когда я отправляю новый. .

Как лучше всего это делать? Кроме того, моя реализация GraphQL сделана правильно?

...