0

I have a service.ts that is adding additional data to the one that were previously fetched from Apollo GraphQL. But the data doesn't matter. What matter is - how to grab the returned value?

class TestService implements TestServiceInterface {
  public async fetch(): Promise<any> {
    const result = await apolloClient.query({
      query: gql`
        query Query {
          Test{
           test
           }
            }
          }
        }
      `,
    })


    return {
      graphTitle: "Test",
      graph: "LINE",
      
    };
  }
}

export interface TestServiceInterface {
  fetch(): Promise<any>;
}

Fetch is done properly, and in my case I couldn't use useQuery and I have to fetch the data outside the React component.

My question is: how to pass the returned value to another .ts file? I tried something like:

export const TestData = async () => { const dataToSet = await TestService.fetch(); }

but the value returned is a promise:

Promise {
  "_U": 0,
  "_V": 0,
  "_W": null,
  "_X": null,
}

How to resolve it? How to grab the returned value from TestService in another .ts file?

EDIT 1:

const test = TestService.fetch()

export const TestService = (async () => {
  return await test
})()

gives me almost what I need, but now in the component I receive (and still an error):

Promise {   "_U": 0,   "_V": 1,   "_W": Object {  **correct values here** }

How to grab the values from inside of the object?

Volando
  • 64
  • 7
  • You will need to `await` the call to the service. – Matt U Dec 12 '21 at 23:52
  • where exactly? To the returned value? – Volando Dec 12 '21 at 23:53
  • Wherever you call `fetch()` on an instance of the service, such as `await testService.fetch()` – Matt U Dec 13 '21 at 00:02
  • Now I get: `Promise { "_U": 0, "_V": 1, "_W": Object { **correct values here** }` How to grab things inside of the object? – Volando Dec 13 '21 at 00:05
  • Can you describe more clearly what exactly you're trying to accomplish, and where exactly you're calling these functions? I can't tell at this point what exactly you're going for. – Matt U Dec 13 '21 at 00:20
  • So, to simplify my case: let say I have an initial state. And I want to set the initialState to whatever is fetched from Apollo GraphQL. Example: `const test = TestService.fetch() export const initialState = (async () => { return await test })()` And I expect initialState to be the object that I am fetching from my backend. Although I still get this weird promise when I `console.log(initialState)` – Volando Dec 13 '21 at 00:24
  • I think you need to `await TestService.fetch()` – Matt U Dec 13 '21 at 00:27
  • `const test = (async () => { return await TestService.fetch(); })();` Still gives the same result: promise with my desired object within `Promise { "_U": 0, "_V": 1, "_W": Object { **correct values here** }` – Volando Dec 13 '21 at 00:37
  • Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) – Matt U Dec 13 '21 at 00:40
  • not really, cuz my console.log is okay, it's when I try to use it elsewhere it returns the desired object within the promise – Volando Dec 13 '21 at 01:21

0 Answers0