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
react-apollo apollo-client
add a comment |
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
react-apollo apollo-client
add a comment |
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
react-apollo apollo-client
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
react-apollo apollo-client
edited Nov 13 at 17:54
user10156178
977
977
asked Nov 13 at 17:49
Giggioz
8213
8213
add a comment |
add a comment |
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!
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
add a comment |
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!
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
add a comment |
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!
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
add a comment |
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!
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!
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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