Context: I'm working with micro front-end, and I want to access the uri of the apollo client. I'm currently passing the whole client object and I don't want to pass also the uri each time.
I defined my ApolloClient object like this:
new ApolloClient({
...
link: ApolloLink.from([errorLink, new HttpLink({ uri: process.env.BACKEND_URL })]),
});
How can I access the uri from the client object ?
const client = useApolloClient();
const uri = client.???
the uri is a field on the object, so you should be able use the Dot property accessor: object.property to obtain the URI. You can learn more about the HTTP Link constructor in the Apollo Docs
Related
I was wondering how I might be able to add the request and response objects to the apollo-server-micro's context. When I try the following, I get an error message saying that the resolver needs to return an object:
new ApolloServer({
context: ({req,res}) => ({req,res})
})
Thank you
I am working on porting oauth2client library to google-auth and oauthlib library
Right now for oauth2 authentication, I am using javascript client and using grantofflineaccess method in it.
The flow for oauth2client library was:
using the js client, we get the authorization code and pass it in oauth2client.client.credentials_from_code to get the credentials object. In the paramaeters, we pass only clientid,secret,scopes and code. There was no mention of redirect_uri.
Right now I am replacing it with flow
https://google-auth-oauthlib.readthedocs.io/en/latest/reference/google_auth_oauthlib.flow.html
This means that I HAVE TO pass redirect_uri to create the flow object, following which I can use flow.fetch_token(code) to get flow.credentials.
Here is my javascript side code (angularJS) (Reference: https://developers.google.com/identity/sign-in/web/reference)
// init
gapi.load('auth2', () => {
const authScopes = {
client_id: $window.GOOGLE_API_CLIENT_ID,
scope: scopes.join(' '),
};
auth2 = gapi.auth2.init(authScopes);
// When signin button clicked
auth2.grantOfflineAccess({ redirect_uri: 'postmessage', prompt: 'consent' })
.then((response) => {
// We enter this when user signins into google account and 'ALLOWS' the scopes. We receive the code in response using which we get the access and refresh token. The below calls are being made to backend
Something.authenticateUser(response.code).then(() => {
$scope.sheetsWizard.onLoginSuccess();
The backend code: (django)
# Upon receiving the 'code', it calls oauth2client function to get credentials object
credentials = client.credentials_from_code(
GOOGLE_API_CLIENT_ID,
GOOGLE_API_CLIENT_SECRET,
scopes,
data['code']
The above was older code, How the new code looks in the backend (The frontend or angularJS remains the same)
flow = Flow.from_client_config(client_config=dictionary_with_client_credentials, scopes=scopes, redirect_uri='some_website.com')
flow.fetch_token(code = data['code'])
credentials = flow.credentials
My questions:
Is there a method in google-auth that I am missing, so I don't have to pass redirect_uri, and still get at least access_token and refresh_token, after receiving code?
in js gapi client, there is a mention of redirect_uri='postmessage', but could not find documentation related to it. What does it mean?
Apollo Server 2.0 ships with built-in server as described here. That means no Express integration is required when setting it up, so the implementation looks something like this:
const { ApolloServer, gql } = require('apollo-server');
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
type Query {
announcement: String
}
`;
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
announcement: () =>
`Say hello to the new Apollo Server! A production ready GraphQL server with an incredible getting started experience.`
}
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
I'm implementing subscriptions to my app. How do I make the app use secured WebSocket protocol with subscriptions? Is it possible at all using the built-in server?
By default the server does not use WSS:
server.listen({ port: PORT }).then(({ url, subscriptionsUrl }) => console.log(url, subscriptionsUrl));
spits out http://localhost:4000/ and ws://localhost:4000/graphql.
In development I got my app to work fine but when I deployed to production I started getting these errors in console:
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS,
but attempted to connect to the insecure WebSocket endpoint
'ws://example.com/graphql'. This request has been blocked; this
endpoint must be available over WSS.
and
Uncaught DOMException: Failed to construct 'WebSocket': An insecure
WebSocket connection may not be initiated from a page loaded over HTTPS.
Solved. Apparently configuring the WebSocket URL to start with wss:// instead of ws:// was enough.
I have an Apollo Server implementation in which consume other REST APIs, I need to know, how can I use another GraphQL API inside a resolver?
I expect an Apollo Server implementation that works as an API Gateway to consume other APIs (REST or GraphQL)
A GraphQL request is made like most other REST calls, with POST with application/json header. It still hits an endpoint, passes data, and provides a body with the query. You don't need a fancy client like Apollo, but you will need to know the implementation;
A query parameter also needs to be passed as a string.
Here is an example call using axios in javascript:
const data = await axios.post(GRAPHQL_URL, {
query: `
getUser(userID: 1234){
id
name
age
}
`,
}, {
headers: {
'Content-Type': 'application/json'
}
})
I'm making a client-side request out to V2 of the Square API using Vue and Axios. My Vue component is as follows:
import axios from 'axios';
export default {
mounted() {
var instance = axios.create({
baseURL: 'https://connect.squareup.com/v2/',
timeout: 1000,
headers: {
'Authorization': 'Bearer xxxxxxxxxxxxxxxxx',
'Accepts': 'application/json',
'Content-Type': 'application/json'
}
});
instance.get('catalog/list')
.then(function (response) {
console.log(response);
}) ;
}
}
However, when I make that call, I receive the following error:
Failed to load https://connect.squareup.com/v2/catalog/list: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://local-env.dev' is therefore not allowed access. The response had HTTP status code 403.
That error suggests that there is some configuration that has to happen on the Square side, but I saw no opportunity to whitelist domains, etc.
Has anyone come across this error before, regardless of service, and if so, how did you resolve?
I don't think the Square API supports being called from a browser. I used Postman to do an OPTIONS request on https://connect.squareup.com/v2/catalog/list and the response was a NOT_FOUND. The OPTIONS request is needed for proper CORS support.
Plus, if you did this, I would think your auth token would need to be sent to the client -- thus exposing it to everyone. It looks like the Square API is only designed to be called from a server. But that is just based on me skimming the docs a bit. I have no experience using their API.
When doing OAuth authorization request you are not supposed to do it from your application. Create and URL with the parameters and open it in a new browser window or tab, Something like:
const grants='MERCHANT_PROFILE_READ CUSTOMERS_READ CUSTOMERS_WRITE PAYMENTS_READ PAYMENTS_WRITE PAYMENTS_WRITE_ADDITIONAL_RECIPIENTS PAYMENTS_WRITE_IN_PERSON';
const params = new HttpParams()
.set('scope', grants)
.set('client_id', <YourSquareApplicationId>)
.set('state', '1878789');
const requestUrl = `${<squareUrl>}/oauth2/authorize?${params.toString()}`;
window.open(requestUrl, "_blank");
That new window is supposed to ask the end user to login to his account and accept or deny the request.