使用 Svelte 从 Javascript 中的 GraphQL 查询访问数据时出现问题

Question

下面是我使用正常 REST 响应的工作函数，我想尝试将其转换为 GraphQL 版本，它从我的 Phoenix 服务器获取 JSON 文档并存储来自 JSON doc 成一个对象。问题是，在这里我可以使用 await，然后从 JSON 文档中的对象分配新的对象值，但是使用 GraphQL 我无法访问此数据来分配它，因为没有 await 函数，因为它只是一个查询. （据我所知）

async function updatePageWithNewCompany(company){
        const res = await fetch(`http://localhost:4000/${company}`);
        profile = await res.json();
        profile = profile.companyProfile 
            DashboardStore.update(currentData => {
                return {
                    id: profile.id,
                    companyName: `${profile.company_name}`,
                    averageLength: profile.average_length,
                    } 
                })

最后我想问一下是否有一种方法可以从 JavaScript 中的 GraphQL 查询访问和分配数据，这样我就可以在我的前端 Svelte 应用程序中显示它之前对其进行操作。

当前 GraphQL 查询示例：

import { gql } from '@apollo/client'
import { client } from './apollo';
import { query, setClient } from "svelte-apollo";   

setClient(client)

const GET_COMPANY = gql`
      query{
        companyProfile(){
            companyName
            averageLength
            }
        }
    `;
const response = query(GET_COMPANY)
...

Answer 1

svelte-apollo 查询 return

a svelte store of promises that resolve as values come in

如所述in the example query displayed in the documentation。

因此，您可以直接在脚本部分利用该格式。这是一个例子：

...
async function getCompany() {
  const companyStore = query(GET_COMPANY)
  const company = (await $companyStore).data.companyProfile
  return company  // format will be an object with keys { companyName, averageLength } according to your query
}
...

附带一提，我建议始终在您的 GraphQL 查询中获取对象的 id，因为它通常是 Apollo 客户端在内部用于管理其缓存的密钥（除非另有明确说明）。

Answer 2

我在@Thomas-Hennes 的帮助下找到了一个可行的解决方案

import { client } from '../apollo.js';
import { onMount } from "svelte";
import { gql } from '@apollo/client'

export const COMPANY_LIST = gql`
    query {
        listCompanies{
            companyName
        }
     }
  `;

async function listCompanies() {
    await client.query({query: COMPANY_LIST})
          .then(res => {
              companyList.update( currentData => 
              [...res.data.listCompanies.companyName])})
        };

onMount(() =>{
    listCompanies()
})

await 不喜欢被分配给变量或操纵其数据，因此我将其用作承诺并操纵响应。下面的 link 帮我找到了最后一块拼图。 https://docs.realm.io/sync/graphql-web-access/using-the-graphql-client

使用 Svelte 从 Javascript 中的 GraphQL 查询访问数据时出现问题

Problems accessing data from a GraphQL query in Javascript with Svelte

javascript

graphql

svelte