3

我目前正在学习 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条目列表在我提交新条目时刷新。

这样做的最佳做法是什么？另外，我的 GraphQL 实现是否以正确的方式完成？

4

1 回答 1

0

您可以重复使用 preload 函数来刷新数据：

  .then((data) => {
    console.log(data);
    newEntry.question = '';
    newEntry.answer = '';

    preload().then(props => {
      faqEntries = props.faqEntries
    })

当您想要显示其他用户以进行额外 api 调用为代价添加的条目时，该方法很有用。

但是如果你只想添加最近添加的条目：

  .then((data) => {
     faqEntries = [...faqEntries, {...newEntry}]
于 2020-06-27T15:49:44.173 回答