Below I have my working function using a normal REST response that I want to try to convert into a GraphQL version, it fetches a JSON doc from my Phoenix Server and stores the object values from the JSON doc into an object. The problem is, here I can use await and then assign the new object values from the object within the JSON document, but using GraphQL I cannot access this data to assign it because there is no await function as its just a Query. (From what I know)
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, } })
Ultimately I am asking if there is a way to access and assign data from a GraphQL query in JavaScript so I can manipulate it before displaying it in my frontend Svelte app.
Example of current GraphQL query:
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) ...
Advertisement
Answer
I have found a working solution with the help of @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 didn’t like being assigned to a variable or having its data manipulated so i used it as a promise instead and manipulated the response. The below link helped me find the final piece of the puzzle. https://docs.realm.io/sync/graphql-web-access/using-the-graphql-client