Graphql 使用Sapper刷新预加载的数据

我目前正在学习Sapper并将其与GraphQL服务集成

首先，我制作了一个FAQ页面，上面有一个简单的问题/答案列表和一个创建表单

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

从“../graphql”导入graphql；
从“graphql标签”导入gql；
导出函数预加载（{params，query}）{
常量图形查询=gql`
{
常见问题解答{
问题:，
回答
}
}
`;
返回graphql.request（graphQuery），然后（（data）=>data）；
}
从“./title”导入标题；
从“../components/form/Input”导入输入；
从“../components/Button”导入按钮；
输出输入项；
常量newEntry={
问题：''，
答复:",，
};
常量附加项=（）=>{
console.log（newEntry）；
graphql.request（gql`
突变{
createFaqEntry(
问题：“${newEntry.question}”
回答：“${newEntry.answer}”
) {
身份证件
问题
回答
}
}
`)。然后（（数据）=>{
控制台日志（数据）；
newEntry.question=''；
newEntry.answer=''；
})
}
{title（'Foire aux questions'）}
附加问题
阿尤尔·恩特雷酒店
{#每个faqEntries作为faqEntry}
{faqEntry.question}

{faqEntry.answer}

{/每个}

当前的脚本工作得很好，允许我直接从编码表单添加FAQ条目

现在，我想在提交新的FAQ条目列表时刷新FAQ条目列表

---

这样做的最佳实践是什么？另外，我的GraphQL实现是否正确？

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

。然后（（数据）=>{
控制台日志（数据）；
newEntry.question=''；
newEntry.answer=''；
预加载（）。然后（道具=>{
faqEntries=props.faqEntries
})

当您希望显示其他用户以进行额外api调用为代价添加的条目时，这种方法非常有用

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

。然后（（数据）=>{
faqEntries=[…faqEntries，{…newEntry}]