Using Apollo Client Query to fetch data from an asynchronous library











up vote
0
down vote

favorite












I've just finished to read through the tutorial in the Apollo GraphQL web page and I'm (obviously?) dazed :)



I'm here because in my use case I have a client library (which I wrote, let's call it InnerClient) that exposes some methods that make grapqhl calls internally, it has no UI.



Now I wanted to import this library in an react apollo project (ApolloReactClient) and i wanted to understand how to leverage the Apollo Client superpowers in this case: i don't have any queries o mutations to do explicitly, I want to call my InnerClient methods, wait for the response (they are asynchronous of course) and then render my React Components in the ApolloReactClient, using the convenient properties that the Query component returns (like data, loading, error...)



I read something about Links and maybe this is the right way to do so but I'm not sure at all.



Can you help me to address me on this issue?
Could you provide a small example in which you have a React component wrapped by the (Apollo) Query component that fetches data from an internal library as in my case?



Regards










share|improve this question




























    up vote
    0
    down vote

    favorite












    I've just finished to read through the tutorial in the Apollo GraphQL web page and I'm (obviously?) dazed :)



    I'm here because in my use case I have a client library (which I wrote, let's call it InnerClient) that exposes some methods that make grapqhl calls internally, it has no UI.



    Now I wanted to import this library in an react apollo project (ApolloReactClient) and i wanted to understand how to leverage the Apollo Client superpowers in this case: i don't have any queries o mutations to do explicitly, I want to call my InnerClient methods, wait for the response (they are asynchronous of course) and then render my React Components in the ApolloReactClient, using the convenient properties that the Query component returns (like data, loading, error...)



    I read something about Links and maybe this is the right way to do so but I'm not sure at all.



    Can you help me to address me on this issue?
    Could you provide a small example in which you have a React component wrapped by the (Apollo) Query component that fetches data from an internal library as in my case?



    Regards










    share|improve this question


























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I've just finished to read through the tutorial in the Apollo GraphQL web page and I'm (obviously?) dazed :)



      I'm here because in my use case I have a client library (which I wrote, let's call it InnerClient) that exposes some methods that make grapqhl calls internally, it has no UI.



      Now I wanted to import this library in an react apollo project (ApolloReactClient) and i wanted to understand how to leverage the Apollo Client superpowers in this case: i don't have any queries o mutations to do explicitly, I want to call my InnerClient methods, wait for the response (they are asynchronous of course) and then render my React Components in the ApolloReactClient, using the convenient properties that the Query component returns (like data, loading, error...)



      I read something about Links and maybe this is the right way to do so but I'm not sure at all.



      Can you help me to address me on this issue?
      Could you provide a small example in which you have a React component wrapped by the (Apollo) Query component that fetches data from an internal library as in my case?



      Regards










      share|improve this question















      I've just finished to read through the tutorial in the Apollo GraphQL web page and I'm (obviously?) dazed :)



      I'm here because in my use case I have a client library (which I wrote, let's call it InnerClient) that exposes some methods that make grapqhl calls internally, it has no UI.



      Now I wanted to import this library in an react apollo project (ApolloReactClient) and i wanted to understand how to leverage the Apollo Client superpowers in this case: i don't have any queries o mutations to do explicitly, I want to call my InnerClient methods, wait for the response (they are asynchronous of course) and then render my React Components in the ApolloReactClient, using the convenient properties that the Query component returns (like data, loading, error...)



      I read something about Links and maybe this is the right way to do so but I'm not sure at all.



      Can you help me to address me on this issue?
      Could you provide a small example in which you have a React component wrapped by the (Apollo) Query component that fetches data from an internal library as in my case?



      Regards







      react-apollo apollo-client






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 13 at 17:54









      user10156178

      977




      977










      asked Nov 13 at 17:49









      Giggioz

      8213




      8213
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote













          I think this is the way to do it



          https://github.com/apollographql/apollo-link-state/tree/master/examples/async



          Edit (adding more info):
          Basically it is possibile with apollo-link-state, it allows to combine your client state with resolvers that work with mutations and queries especially designed for it with the @client directive.



           const client = new ApolloClient({
          link: withClientState({ resolvers }),
          cache: new InMemoryCache(),
          });


          Here you say Apollo to use for the requests resolvers and passing to them the client state.



          const GET_CURRENT_POSITION = gql`
          query getCurrentPosition($timeout: Int) {
          currentPosition(timeout: $timeout) @client {
          coords {
          latitude
          longitude
          }
          }


          }
          `;



          Here you define a query for the client (note @client) and the query is resolved in an asynchronous way with this promise



             const getCurrentPosition = options => {
          return new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, options);
          });
          };


          Hope this helps!






          share|improve this answer























          • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
            – Cindy Meister
            Nov 13 at 20:17










          • I edited the answer, thanks. @CindyMeister
            – Giggioz
            Nov 13 at 21:00











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286837%2fusing-apollo-client-query-to-fetch-data-from-an-asynchronous-library%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          1
          down vote













          I think this is the way to do it



          https://github.com/apollographql/apollo-link-state/tree/master/examples/async



          Edit (adding more info):
          Basically it is possibile with apollo-link-state, it allows to combine your client state with resolvers that work with mutations and queries especially designed for it with the @client directive.



           const client = new ApolloClient({
          link: withClientState({ resolvers }),
          cache: new InMemoryCache(),
          });


          Here you say Apollo to use for the requests resolvers and passing to them the client state.



          const GET_CURRENT_POSITION = gql`
          query getCurrentPosition($timeout: Int) {
          currentPosition(timeout: $timeout) @client {
          coords {
          latitude
          longitude
          }
          }


          }
          `;



          Here you define a query for the client (note @client) and the query is resolved in an asynchronous way with this promise



             const getCurrentPosition = options => {
          return new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, options);
          });
          };


          Hope this helps!






          share|improve this answer























          • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
            – Cindy Meister
            Nov 13 at 20:17










          • I edited the answer, thanks. @CindyMeister
            – Giggioz
            Nov 13 at 21:00















          up vote
          1
          down vote













          I think this is the way to do it



          https://github.com/apollographql/apollo-link-state/tree/master/examples/async



          Edit (adding more info):
          Basically it is possibile with apollo-link-state, it allows to combine your client state with resolvers that work with mutations and queries especially designed for it with the @client directive.



           const client = new ApolloClient({
          link: withClientState({ resolvers }),
          cache: new InMemoryCache(),
          });


          Here you say Apollo to use for the requests resolvers and passing to them the client state.



          const GET_CURRENT_POSITION = gql`
          query getCurrentPosition($timeout: Int) {
          currentPosition(timeout: $timeout) @client {
          coords {
          latitude
          longitude
          }
          }


          }
          `;



          Here you define a query for the client (note @client) and the query is resolved in an asynchronous way with this promise



             const getCurrentPosition = options => {
          return new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, options);
          });
          };


          Hope this helps!






          share|improve this answer























          • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
            – Cindy Meister
            Nov 13 at 20:17










          • I edited the answer, thanks. @CindyMeister
            – Giggioz
            Nov 13 at 21:00













          up vote
          1
          down vote










          up vote
          1
          down vote









          I think this is the way to do it



          https://github.com/apollographql/apollo-link-state/tree/master/examples/async



          Edit (adding more info):
          Basically it is possibile with apollo-link-state, it allows to combine your client state with resolvers that work with mutations and queries especially designed for it with the @client directive.



           const client = new ApolloClient({
          link: withClientState({ resolvers }),
          cache: new InMemoryCache(),
          });


          Here you say Apollo to use for the requests resolvers and passing to them the client state.



          const GET_CURRENT_POSITION = gql`
          query getCurrentPosition($timeout: Int) {
          currentPosition(timeout: $timeout) @client {
          coords {
          latitude
          longitude
          }
          }


          }
          `;



          Here you define a query for the client (note @client) and the query is resolved in an asynchronous way with this promise



             const getCurrentPosition = options => {
          return new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, options);
          });
          };


          Hope this helps!






          share|improve this answer














          I think this is the way to do it



          https://github.com/apollographql/apollo-link-state/tree/master/examples/async



          Edit (adding more info):
          Basically it is possibile with apollo-link-state, it allows to combine your client state with resolvers that work with mutations and queries especially designed for it with the @client directive.



           const client = new ApolloClient({
          link: withClientState({ resolvers }),
          cache: new InMemoryCache(),
          });


          Here you say Apollo to use for the requests resolvers and passing to them the client state.



          const GET_CURRENT_POSITION = gql`
          query getCurrentPosition($timeout: Int) {
          currentPosition(timeout: $timeout) @client {
          coords {
          latitude
          longitude
          }
          }


          }
          `;



          Here you define a query for the client (note @client) and the query is resolved in an asynchronous way with this promise



             const getCurrentPosition = options => {
          return new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, options);
          });
          };


          Hope this helps!







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 13 at 21:00

























          answered Nov 13 at 18:44









          Giggioz

          8213




          8213












          • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
            – Cindy Meister
            Nov 13 at 20:17










          • I edited the answer, thanks. @CindyMeister
            – Giggioz
            Nov 13 at 21:00


















          • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
            – Cindy Meister
            Nov 13 at 20:17










          • I edited the answer, thanks. @CindyMeister
            – Giggioz
            Nov 13 at 21:00
















          While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
          – Cindy Meister
          Nov 13 at 20:17




          While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review
          – Cindy Meister
          Nov 13 at 20:17












          I edited the answer, thanks. @CindyMeister
          – Giggioz
          Nov 13 at 21:00




          I edited the answer, thanks. @CindyMeister
          – Giggioz
          Nov 13 at 21:00


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286837%2fusing-apollo-client-query-to-fetch-data-from-an-asynchronous-library%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          How to change which sound is reproduced for terminal bell?

          Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

          Can I use Tabulator js library in my java Spring + Thymeleaf project?