When I follow the ApolloGraphQL docs here:
https://www.apollographql.com/docs/apollo-server/performance/apq/#setup
It says that the Apollo Server automatically handles AQP requests with no changes. Yet, when my client calls:
http://localhost:4000/graphql
I get a 404 file not found.
Shouldn't that automatically be working on an apollo graphql server?
I didn't realize for localhost testing I need to set full uri.
const link = ApolloLink.from([
createPersistedQueryLink({ useGETForHashedQueries: true }),
createHttpLink({ uri: "http://localhost:4000/graphql" })
]);
Related
To eliminate cors OPTIONS requests I want to proxy API calls through the Next.JS server. I've added this configuration change to my next.config.js file:
const withImages = require("next-images");
const { environment } = require("./environments/environment");
module.exports = withImages({
rewrites: async () => [
{ source: "/proxy/api/:match*", destination: `${environment.apiUrl}/:match*` },
],
});
I'm running next version 10.2.3 (latest at time of posting).
Calls to the back-end are performed through fetch within React components. In the browser dev tools I can see that the HTTP request is being performed. A request is sent out to "http://localhost:4200/proxy/api/user/me". It hits the Next server. But after that the Next server does not hit the API server. It responds immediately with a 404. It seems that it hasn't recognized the "rewrites" configuration at all.
This was an issue with an outdated version of nx
I'm using the socket.io implementation with nestjs. My overall in-production architecture is relying on a load balancer to route requests on paths to microservice containers.
One of them contains a websocket that interacts with user data and is nested on mydomain.com/apis/user
On my gateway I've configured it to use this path:
#WebSocketGateway({ path: "/apis/user/gateway", namespace: "/apis/user/gateway" })
and I've tried variations without the namespace there and with just the path.
I also have a global prefix: app.setGlobalPrefix("apis/user"); removing this makes no difference, it seems I need to define the path to the gateway either way prefix or not.
Then on the client I'm trying to just connect to it via either adding the path in the url, or to the options object, as such:
const endpoint = "https://example.com/apis/user/gateway";
socket = io(endpoint, {
secure: true,
path: "/apis/user/gateway",
});
This works for the path and handleConnection triggers on the gateway nested there, however configuring polling on the backend does not work, the client still throws:
https://example.com/apis/user/gateway/?EIO=4&transport=polling&t=NXVpMfB 404 Not Found
I had the same problem, all the various options are confusing. I got it sorted though, here is what worked:
For the nestjs:
#WebSocketGateway({
cors: {
origin: '*',
},
namespace: '/api/v1/ws',
path: '/api/v1/ws/socket.io',
})
For socket.io:
const newSocket = io("http://localhost:3000/api/v1/ws", {
path: "/api/v1/ws/socket.io",
});
My idea was to build a client app using react and urql and a graphql api using elixir and absinthe but at the moment it looks as if these don't really play that well together.
Is there a way to actually use the Absinthe subscriptions with any other client than Apollo? I've tried to use urql but I fail with the ws connection getting the following error:
WebSocket connection to 'ws://localhost:4000/socket/websocket' failed:
Error during WebSocket handshake: Sent non-empty
'Sec-WebSocket-Protocol' header but no response was received
Only thing I've found so far which seems to be related to this issue is this library absinthe/socket-apollo-link (https://github.com/absinthe-graphql/absinthe-socket/tree/master/packages/socket-apollo-link) but it's obviously only for Apollo.
In my failed attempt I did the following:
import React from 'react'
import { Provider, Client, dedupExchange, fetchExchange, subscriptionExchange } from 'urql'
import { cacheExchange } from '#urql/exchange-graphcache'
import { SubscriptionClient } from 'subscriptions-transport-ws'
const DataProvider = ({ children }) => {
const cache = cacheExchange({})
const subscriptionClient = new SubscriptionClient('ws://localhost:4000/socket/websocket', {})
const client = new Client({
url: 'http://localhost:4000/api',
exchanges: [
dedupExchange,
cache,
fetchExchange,
subscriptionExchange({
forwardSubscription: operations => subscriptionClient.request(operations),
}),
],
})
return <Provider value={client}>{children}</Provider>
}
export default DataProvider
This 'subscriptions-transport-ws' I found from a tutorial and that mysterious '/websocket' at the end of the ws url was mentioned in some gh issue but it seems to work (before adding that to the end of the url there was no ws connection at all).
This doesn't directly answer the question, but in case someone ends up with the same confusion and as a response to your comment here:
I found from a tutorial and that mysterious '/websocket' at the end of the ws url was mentioned in some gh issue but it seems to work (before adding that to the end of the url there was no ws connection at all).
This is due to both longpoll and websocket being viable transports. You likely had your socket defined in your Endpoint with websocket: true which gave you that route. Running mix phx.routes | grep socket would have been a helpful command.
This is obviously a late reply, but I'll try my best anyway. It seems that Absinthe has an alternative client library that's different from subscriptions-transport-ws, notably it's here: https://github.com/absinthe-graphql/absinthe-socket/blob/master/packages/socket-apollo-link/src/createAbsintheSocketLink.js#L8
If you integrate with this library instead then presumably it'll work. So that means you likely have to integrate with PhoenixSocket instead, as shown here: https://github.com/absinthe-graphql/absinthe-socket/tree/master/packages/socket-apollo-link#examples
I am using Apollo server to implement a GraphQL API, which automatically gives me a GraphQL Playground. According to the GraphQL Playground docs I should have (or at least be able to enable) a "Share" feature that will create a GraphQL Bin link (e.g. https://graphqlbin.com/OksD) that I could send to a colleague so they can view and run my same query.
Unfortunately this isn't available from Apollo server out of the box. How can I enable this feature? If this is not possible, is there another simple way for me to export my query from GraphQL Playground for someone else to import it? (I see the "copy curl" option, but I don't see an easy way to import from curl.)
Add shareEnabled: true to your playground options, e.g.
const apolloServer = new ApolloServer({
schema,
debug: isDevelopment,
introspection: isDevelopment,
playground: {
shareEnabled: true,
},
});
You might also want to fix CORS origin headers, allowing requests from https://graphqlbin.com
I wanted to change the graphql websocket end point inside graphql, anyone know how to do this?
by default it pings
wss://localhost/graphql
I need to change it to pusher url
thanks :-)
If you are running a standalone instance of GraphQL Playground, the URL is passed directly to the component as a prop:
<Playground
endpoint="http://localhost/graphql"
subscriptionEndpoint="wss://localhost/graphql"
/>
If you're using apollo-server, the endpoint URL should be derived from the subscriptionsPath, but it can also be set directly in the config:
const server = new ApolloServer({
typeDefs,
resolvers,
playground: {
subscriptionEndpoint: 'wss://localhost/graphql',
},
});
EDIT:
It doesn't appear there's a way to configure the desktop client with a specific subscription URL, unless you're using it with a local repo that contains a .graphqlconfig. In that case, you can provide additional information about your environment, including the subscription url, in the config file as outlined here.