There are several services that process graphql-requests on relative URLs.
Example: http://service:8080/graphql/a3333333-b111-c111-d111-e00000000011.
And I don’t understand how to config apolloGateway that part of url is a variable.
Try config url as:
const test_service: string = 'http://service:8080/graphql/:project';
supergraphSdl: new IntrospectAndCompose({
subgraphs: [
{ name: 'test_service', url: test_service },
],
}),
So full service look like:
import { ApolloServer } from 'apollo-server'
import { ApolloGateway, IntrospectAndCompose, RemoteGraphQLDataSource } from '#apollo/gateway'
const test_service: string = 'http://service:8080/graphql/:project';
const gateway_main = new ApolloGateway({
supergraphSdl: new IntrospectAndCompose({
subgraphs: [
{ name: 'test_service', url: test_service },
],
}),
});
const server_main = new ApolloServer({
introspection: true,
gateway: gateway_main
});
server_main.listen(8060).then(({ url }) => {
console.log(`Server ready at ${url}`);
});
But if I send a request to url http://service:8060/graphql/a3333333-b111-c111-d111-e00000000011
test_service get it as http://service/graphql/:project
So test_service lose uuid-data
Related
i am using Redux-toolkit-query to fetch data from server. Now i want to call my query on button click,not automatically.I tried this but it's not working.
const { data, refetch } = useGetBuisnessAreasQuery({
enable: false,
refetchOnWindowFocus: false,
manual: true,
refetchOnReconnect: false,
});
You have to use the lazy query hook:
const [ trigger, { data } ] = api.endpoints.getBuisnessAreas.useLazyQuery()
const onClick = () => {
trigger()
}
This is how I did it, it's only cleaner:
in feature/service.ts:
export const authenticationApi = createApi({
reducerPath: 'myApi',
baseQuery: fetchBaseQuery({ baseUrl: baseUrl }),
endpoints: builder => ({
attemptLogin: builder.query({
query: (credentials) => ({
url: '/',
body: JSON.stringify(body)
})
})
})
})
export const { useLazyAttemptLoginQuery } = authenticationApi
and using it:
const [getAuthenticated, { data, isLoading, error }] = useLazyAttemptLoginQuery()
I'm fairly new to GraphQL and currently familiarizing myself by making a quiz application using React on the front-end.
At the moment, I'm busy with my back-end. After successfully setting up queries and mutations, I am finding it difficult to get subscriptions working. When using GraphiQL, I am getting null as an output instead of "Your subscription data will appear here..."
Queries and the mutation for adding the quiz works.
The entry point of my server, app.js:
const express = require("express");
const mongoose = require("mongoose");
const { graphqlHTTP } = require("express-graphql");
const schema = require("./graphql/schema");
const cors = require("cors");
const port = 4000;
//Subscriptions
const { createServer } = require("http");
const { SubscriptionServer } = require("subscriptions-transport-ws");
const { execute, subscribe } = require("graphql");
const subscriptionsEndpoint = `ws://localhost:${port}/subscriptions`;
const app = express();
app.use(cors());
mongoose.connect("mongodb://localhost/quizify", {
useNewUrlParser: true,
useCreateIndex: true,
useUnifiedTopology: true,
useFindAndModify: false
});
mongoose.connection.once("open", () => console.log("connected to database"));
app.use("/graphql", graphqlHTTP({
schema,
graphiql: true,
subscriptionsEndpoint,
}));
const webServer = createServer(app);
webServer.listen(port, () => {
console.log(`GraphQL is now running on http://localhost:${port}`);
//Set up the WebSocket for handling GraphQL subscriptions.
new SubscriptionServer({
execute,
subscribe,
schema
}, {
server: webServer,
path: '/subscriptions',
});
});
Below is from the schema definitions, schema.js:
const { graphqlHTTP } = require("express-graphql");
const graphql = require("graphql");
const { PubSub } = require("graphql-subscriptions");
const pubsub = new PubSub();
//Import of Mongoose Schemas:
const Quiz = require("../models/quiz");
const {
GraphQLObjectType,
GraphQLList,
GraphQLSchema,
GraphQLNonNull,
GraphQLID,
GraphQLString,
GraphQLBoolean
} = graphql;
const QuizType = new GraphQLObjectType({
name: "Quiz",
fields: () => ({
id: { type: GraphQLID },
title: { type: GraphQLString },
questions: {
type: new GraphQLList(QuestionType),
resolve(parent, args) {
return Question.find({ quizId: parent.id });
}
},
creator: {
type: UserType,
resolve(parent, args) {
return User.findById(parent.creatorId);
}
}
})
});
const NEW_QUIZ_ADDED = "new_quiz_added";
const Subscription = new GraphQLObjectType({
name: "Subscription",
fields: {
quizAdded: {
type: QuizType,
subscribe: () => {
pubsub.asyncIterator(NEW_QUIZ_ADDED);
},
},
}
});
const Mutation = new GraphQLObjectType({
name: "Mutation",
fields: {
createQuiz: {
type: QuizType,
args: {
title: { type: new GraphQLNonNull(GraphQLString) },
creatorId: { type: new GraphQLNonNull(GraphQLID) }
},
resolve(parent, args) {
const newQuiz = new Quiz({ //Quiz imported from Mongoose schema.
title: args.title,
creatorId: args.creatorId,
});
pubsub.publish(NEW_QUIZ_ADDED, { quizAdded }); //NEW_QUIZ_ADDED - a constant defined above for easier referencing.
return newQuiz.save();
}
},
},
});
module.exports = new GraphQLSchema({
query: RootQuery,
mutation: Mutation,
subscription: Subscription,
});
I've looked around, however I'm not finding an method that works for this kind of site. I know it might sound like a simple problem. Any assistance would be greatly appreciated!
Ok so I see a lot of answers for how to enable cors for apollo-express, but I haven't found one really for apollo-server-lambda.
This is the error that I'm getting from chrome:
Access to XMLHttpRequest at 'https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/'
from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: The 'Access-Control-Allow-Origin' header
has a value 'https://example.com' that is not equal to the supplied origin.
I do not know how to change the value "https://example.com." Here is my code of how I'm trying to create the server:
const { ApolloServer } = require('apollo-server-lambda')
const typeDefs = require('./schema')
const resolvers = require ('./resolvers')
const server = new ApolloServer({
typeDefs,
resolvers,
introspection: true,
playground: {
endpoint: "/alpha/graphql",
},
});
exports.graphqlHandler = server.createHandler({
cors: {
// origin: true,
origin: "http://localhost:4200", // <-- This is not changing the header value. Do I need to do it from the frontend?
credentials: true,
},
});
What else do I need to do here?
Edit
I'm not sure if this is relevant, but here is my graphql.module.ts file. This is how I'm setting grahql in the frontend:
import { NgModule } from '#angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache } from '#apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
const uri = 'https://5j3gae3086.execute-api.us-east-2.amazonaws.com/alpha/'; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({ uri,
// these comments are things that I tried with no luck :(
// fetchOptions: {
// mode: 'no-cors',
// },
// headers: {
// 'Access-Control-Allow-Origin': 'http://localhost:4200',
// 'Access-Control-Allow-Methods': 'POST',
// 'Access-Control-Allow-Headers': 'application/json'
// "Access-Control-Allow-Credentials" : true
// "X-CSRFToken": Cookies.get('csrftoken')
// },
}),
cache: new InMemoryCache(),
};
}
#NgModule({
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule { }
Also in case anyone is curious, I'm using AWS Api Gateway to use the lambda, but I believe I have the configuration for cors added correctly on that.
I'm at a loss with this. What do I need to change?
Following the CORS setup instructions here I can successfully use apollo-angular to return results for a simple query. No special headers etc. were needed.
https://www.apollographql.com/docs/apollo-server/deployment/lambda/
// serverless.yml
events:
- http:
path: graphql
method: post
cors: true
- http:
path: graphql
method: get
cors: true
// graphql.js
exports.graphqlHandler = server.createHandler({
cors: {
origin: '*',
credentials: true,
},
});
// graphql.module.ts
import {NgModule} from '#angular/core';
import {APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache} from '#apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
const uri = 'https://xxx/dev/graphql';
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({uri}),
cache: new InMemoryCache(),
};
}
#NgModule({
providers: [
{
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
},
],
})
export class GraphQLModule {}
// In Angular 10
this.apollo
.watchQuery({
query: gql`
{
users {
email
}
}
`,
})
.valueChanges.subscribe(result => {
console.log(result.data);
});
Unlike an initial question, graphql.js is replaced to typescript as following.
// graphql.ts
exports.graphqlHandler = server.createHandler({
expressGetMiddlewareOptions: {
cors: {
origin: '*',
credentials: true,
},
},
});
I am trying to use REST endpoints to post data and GraphQL for query and fetch along with apollo-link-state. My rest endpoint is getting hit and application is getting created. But when I try to run the query to write to cache it's not hitting the graphql endpoint. and I keep getting the following error:
Unhandled Rejection (Error): Can't find field findApplicationByUuid({"uuid":"912dc46d-2ef8-4a77-91bc-fec421f5e4bc"}) on object (ROOT_QUERY) {
"application": {
"type": "id",
"id": "$ROOT_QUERY.application",
"generated": true
}
}.
Here are my GQL query
import gql from 'graphql-tag';
const START_APP = gql`
mutation startApp($type: String!) {
application: startApp( input: { applicationType: $type})
#rest(type: "Application", path: "v1/member/application/create", method: "POST") {
uuid: applicationUuid
}
}
`;
const GET_APP = gql`
query getAppByUuid($uuid: String!) {
application: findApplicationByUuid(uuid: $uuid) {
uuid,
type,
version,
}
}
`;
export {
START_APP,
GET_APP,
};
Here is my resolver:
import { START_APP, GET_APP } from './application'
import client from '../apolloClient';
const startApp = async (_, { type }, { cache }) => {
client.mutate({
variables: { type },
mutation: START_APP,
}).then(({ data: { application } }) => {
const { uuid } = application;
const { data } = cache.readQuery({
query: GET_APP,
variables: { uuid },
});
cache.writeQuery({
query: GET_APP,
data,
});
});
};
const resolvers = {
Mutation: {
startApp,
},
};
Here are my links:
import { resolvers, defaults } from './resolvers';
const cache = new InMemoryCache();
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.map(({ message, locations, path }) =>
console.log(`[GQL Error]: Msg: ${message}, Loc: ${locations}, Path: ${path}`));
if (networkError) console.log(`[Network error]: ${networkError}`);
});
const stateLink = withClientState({
cache,
defaults,
resolvers,
});
const restLink = new RestLink({
uri: 'http://localhost:7010/api/',
credentials: 'include',
});
const batchHttpLink = new BatchHttpLink({
uri: 'http://localhost:7010/api/graphql',
credentials: 'include',
});
const httpLink = new HttpLink({
uri: 'http://loaclhost:7010/api/graphql',
credentials: 'include',
});
const link = ApolloLink.from([
errorLink,
stateLink,
restLink,
httpLink,
]);
my client
const client = new ApolloClient({
link,
cache,
});
My react component:
// Remote Mutation
const START_APP = gql`
mutation startApp($type: String!) {
startApp(type: $type) #client {
uuid
}
}
`;
const StartApp = ({ match }) => {
const { type } = match.params;
return (
<Mutation mutation={START_APP} variables={{ type }}>
{startApp => (<button onClick={startApp}>click me</button>)}
</Mutation>
)
};
When I hit the button it calls create endpoint and creates the app and returns the uuid. But the following I want to happen is hit the graphql endpoint and query for the application using the uuid returned from the rest request, and write that data to the cache/state.
I'm new in Seneca. I have been trying to make two microservices to communicate each other but I keep failing and get this errors:
Error: Response Error: 404 Not Found
at module.exports.internals.Utils.internals.Utils.handle_response (c:\Users\Actiview\Desktop\microservices\orderManager\node_modules\seneca-transport\lib\transport-utils.js:71:11)
at c:\Users\Actiview\Desktop\microservices\orderManager\node_modules\seneca-transport\lib\http.js:154:25
at read (c:\Users\Actiview\Desktop\microservices\orderManager\node_modules\wreck\lib\index.js:590:24)
at finish (c:\Users\Actiview\Desktop\microservices\orderManager\node_modules\wreck\lib\index.js:398:20)
at wrapped (c:\Users\Actiview\Desktop\microservices\orderManager\node_modules\hoek\lib\index.js:879:20)
at module.exports.internals.Recorder.onReaderFinish (c:\Users\Actiview\Desktop\microservices\orderManager\node_modules\wreck\lib\index.js:449:16)
at Object.onceWrapper (events.js:313:30)
at emitNone (events.js:111:20)
at module.exports.internals.Recorder.emit (events.js:208:7)
at finishMaybe (_stream_writable.js:614:14)
=== SENECA FATAL ERROR === MESSAGE: ::: seneca: Action failed: Response Error: 404 Not Found. CODE: ::: act_execute INSTANCE :::
Seneca/pcbyi7v5c76v/1534346071465/6536/3.7.0/- DETAILS ::: {
message: 'Response Error: 404 Not Found',
pattern: '',
fn: { [Function: transport_client] id: 'host:127.0.0.2,pg:,port:8080' },
callback:
{ [Function: bound action_reply]
seneca:
Seneca {
'private$':
{ act:
{ parent:
{ start: 1534346071559,
end: 1534346071561, and more...
this is my code:
orderIndex.ts
{
const orderPlugin = require('./orderManagerPlugin');
const express = require('express');
const SenecaWeb = require('seneca-web');
const seneca = require("seneca")();
let bodyParser = require('body-parser');
var Routes = [{
prefix: '/orders',
pin: 'area:order,action:*',
map: {
fetch: { GET: true },
create: { GET: false, POST: true },
delete: { GET: false, DELETE: true },
}
}]
var config = {
routes: Routes,
adapter: require('seneca-web-adapter-express'),
context: express().use(bodyParser.urlencoded({ 'extended': 'true' })).use(bodyParser.json()),
options: {parseBody: false}
}
seneca.use(SenecaWeb,config);
seneca.use( orderPlugin );
seneca.ready(function (err) {
const app = seneca.export('web/context')();
app.listen({ host: "127.0.0.4", port: 8081 });
});
}
orderPlugin.ts
{
var plugin = function orderPlugin(options) {
var seneca = this;
var senecaEmailer;
seneca.add({ area: "order", action: "fetch" }, function (args,
done) {
var orders = this.make("orders");
orders.list$({ id: args.id }, done);
});
seneca.add({ area: "order", action: "delete" }, function (args,
done) {
var orders = this.make("orders");
orders.remove$({ id: args.id }, function (err) {
done(err, null);
});
});
seneca.add({ area: "order", action: "create" }, function (args,
done) {
console.log('create order');
senecaEmailer.act( 'role:web', {area: 'email', action:'send'} , done);
});
this.add( { init: "orderPlugin" }, function (args, done) {
senecaEmailer = require("seneca")().client({ host: "127.0.0.2", port: 8080 });
done();
});
}
module.exports = plugin;
}
emailIndex.ts
{
const mailPlugin = require('./emailingPlugin');
const express = require('express');
const SenecaWeb = require('seneca-web');
const seneca = require("seneca")();
let bodyParser = require('body-parser');
var Routes = [{
prefix: '/emails',
pin: 'area:email, action:*',
map: {
send: { GET: true },
}
}]
var config = {
routes: Routes,
adapter: require('seneca-web-adapter-express'),
context: express().use(bodyParser.urlencoded({ 'extended': 'true' })).use(bodyParser.json()),
options: {parseBody: false}
}
seneca.use(SenecaWeb,config);
seneca.use( mailPlugin );
seneca.ready(function (err) {
const app = seneca.export('web/context')();
app.listen({ host: "127.0.0.2", port: 8080 } );
});
}
emailPlugin.ts
{
import {EmailService} from './emailService';
var plugin = function emailPlugin(options) {
var seneca = this;
let mailer :EmailService ;
seneca.add({area: "email", action: "send"}, function(args, done) {
mailer.sendMail('guzon56#gmail.com', done);
});
this.add( { init: "emailPlugin" }, function (args, done) {
console.log('before init');
mailer = require('./emailService')();
console.log('after init');
done();
});
};
module.exports = plugin;
}
please help me.
Tnx.
Seneca is explained by Richard Rodger in this post. The chapter "Service Discovery" talks about meshing the microservices in a network.
For my applications I use the seneca-mesh plugin. This plugin README says:
To join the network, all a service has to do is contact one other
service already in the network. The network then shares information
about which services respond to which patterns. There is no need to
configure the location of individual services anywhere.
Reading Richard's post and the plugin documentation could be a good starting point for your project. Hope it helps!