Skip to content
Advertisement

Problems accessing data from a GraphQL query in Javascript with Svelte

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

1 People found this is helpful
Advertisement