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.
Related
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" })
]);
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 am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
I'm working on an express backend that use graphql ajd I don't know if I need to use the express-graphql or appolo-server-graphql lib.
Thank you for your help!
I suggest using apollo-server-express over express-graphql. They are very similar, but apollo-server-express has more bells and whistles all while having a simpler and clearer API IMO.
The biggest improvement in apollo-server-express, for me, is the playground: https://github.com/prisma/graphql-playground
The playground is better than express-graphql's graphiql for several reasons, but one big one is that it allows you to put HTTP headers in the request, which is more appropriate for handling session.
www.graphqlbin.com will allow you to use the playground on any endpoint which does not have cors. If you have cors, then you will need to run playground directly from your server.
Here is a sample of code to get you started:
const { ApolloServer } = require('apollo-server-express')
const graphqlServer = new ApolloServer({
schema,
introspection: true,
playground: true,
})
graphqlServer.applyMiddleware({
app
})