To create a Svelte app with Material UI components that sends a GraphQL query for getting anime titles and ratings from AniList and displays that information to the user, you can follow these steps:

1. Create a new Svelte app using the Svelte template in your preferred development environment.

2. Install the following dependencies:
``` 
npm install @material-ui/core @material-ui/icons apollo-boost graphql graphql-tag svelte-apollo
``` 
3. Create a new GraphQL client using Apollo Boost:
```
import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://graphql.anilist.co",
});
```
4. Create a GraphQL query to fetch anime titles and ratings:
```
import gql from "graphql-tag";

const ANIME_QUERY = gql`
  query ($perPage: Int!, $page: Int!) {
    Page(perPage: $perPage, page: $page) {
      media(type: ANIME, sort: POPULARITY_DESC) {
        id
        title {
          romaji
          english
        }
        averageScore
      }
    }
  }
`;
```
5. Create a Svelte component to render the anime titles and ratings using Material UI components:
```
<script>
  import { query } from "svelte-apollo";
  import { ANIME_QUERY } from "./queries";

  const { loading, error, data } = query(ANIME_QUERY, {
    variables: {
      perPage: 10,
      page: 1,
    },
  });
</script>

{#if loading}
  <p>Loading...</p>
{:else if error}
  <p>Error: {error.message}</p>
{:else}
  <ul>
    {#each data.Page.media as anime}
      <li>
        <h2>{anime.title.english || anime.title.romaji}</h2>
        <p>Rating: {anime.averageScore}</p>
      </li>
    {/each}
  </ul>
{/if}
```
6. Style the component using Material UI:
```
<slot></slot>

<style>
  :global(body) {
    margin: 0;
    font-family: "Roboto", sans-serif;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    padding: 16px;
    border-bottom: 1px solid #eee;
  }
  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
  p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #666;
  }
</style>
```
7. Render the component in your main app component:
```
<template>
  <div class="container">
    <h1>Anime Titles and Ratings</h1>
    <AnimeList />
  </div>
</template>

<script>
  import AnimeList from "./AnimeList.svelte";
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
  }
  h1 {
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 500;
    color: #333;
  }
</style>
```
That's it! You should now have a Svelte app that fetches anime titles and ratings from AniList using GraphQL and displays them using Material UI components.
หากต้องการสร้างแอป Svelte ด้วยส่วนประกอบ Material UI ที่ส่งแบบสอบถาม GraphQL เพื่อรับชื่ออะนิเมะและการจัดอันดับจาก AniList และแสดงข้อมูลนั้นแก่ผู้ใช้ คุณสามารถทำตามขั้นตอนเหล่านี้: 1. สร้างแอป Svelte ใหม่โดยใช้เทมเพลต Svelte ตามที่คุณต้องการ การพัฒนาสภาพแวดล้อม. 2. ติดตั้งการขึ้นต่อกันต่อไปนี้: ``` npm install @material-ui/core @material-ui/icons apollo-boost graphql graphql-tag svelte-apollo ``` 3. สร้างไคลเอนต์ GraphQL ใหม่โดยใช้ Apollo Boost: `` ` นำเข้า ApolloClient จาก "apollo-boost"; ลูกค้า const = ApolloClient ใหม่ ({ uri: "https://graphql.anilist.co", }); ``` 4. สร้างแบบสอบถาม GraphQL เพื่อดึงชื่ออนิเมะและการให้คะแนน: ``` นำเข้า gql จาก "graphql-tag"; const ANIME_QUERY = gql` แบบสอบถาม ($perPage: Int!, $page: Int!) { หน้า (perPage: $perPage, หน้า: $page) { สื่อ (ประเภท: ANIME เรียงลำดับ: POPULARITY_DESC) { ชื่อ id { romaji english } คะแนนเฉลี่ย } } } `; ``` 5. สร้างส่วนประกอบ Svelte เพื่อเรนเดอร์ชื่ออนิเมะและการให้คะแนนโดยใช้ส่วนประกอบ Material UI: ``` <script> import { query } from "svelte-apollo"; นำเข้า { ANIME_QUERY } จาก "./queries"; const { กำลังโหลด ข้อผิดพลาด ข้อมูล } = แบบสอบถาม (ANIME_QUERY, { ตัวแปร: { perPage: 10, หน้า: 1, }, }); </script> {#if Loading} <p>กำลังโหลด...</p> {:else if error} <p>ข้อผิดพลาด: {error.message}</p> {:else} <ul> {#each data.Page.media เป็นอนิเมะ} <li> <h2>{anime.title.english || anime.title.romaji}</h2> <p>เรตติ้ง: {anime.averageScore}</p> </li> {/each} </ul> {/if} ``` 6. จัดรูปแบบส่วนประกอบโดยใช้ Material UI: ``` <slot></slot> <style> :global(body) { ระยะขอบ: 0; ตระกูลฟอนต์: "Roboto", sans-serif; } ul { รายการสไตล์: ไม่มี; ช่องว่างภายใน: 0; } li { การขยาย: 16px; ขอบล่าง: 1px solid #eee; } h2 { ระยะขอบ: 0; ขนาดตัวอักษร: 18px; น้ำหนักตัวอักษร: 500; สี: #333; } p { ระยะขอบ: 0; ขนาดตัวอักษร: 14px; น้ำหนักตัวอักษร: 400; สี: #666; } </style> ``` 7. เรนเดอร์ส่วนประกอบในส่วนประกอบแอปหลักของคุณ: ``` <template> <div class="container"> <h1>ชื่ออะนิเมะและการให้คะแนน</h1> <AnimeList /> </ div> </template> <script> นำเข้า AnimeList จาก "./AnimeList.svelte"; </script> <style> .container { จอแสดงผล: ดิ้น; ทิศทางแบบยืดหยุ่น: คอลัมน์; จัดรายการ: กึ่งกลาง; ช่องว่างภายใน: 32px; } h1 { ขอบล่าง: 16px; ขนาดตัวอักษร: 24px; น้ำหนักตัวอักษร: 500; สี: #333; } </style> ``` แค่นั้นแหละ! ตอนนี้คุณควรมีแอป Svelte ที่ดึงชื่อและเรตติ้งอนิเมะจาก AniList โดยใช้ GraphQL และแสดงโดยใช้ส่วนประกอบ Material UI
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence