405 Method Not Allowed when trying to connect apollo-angular client to graphql-server - node.js

Im trying to connect my angular-Apollo Client to my graphql backend and I Keep getting a 405 error. My Server is hosted on localhost port 4000 and my Client is also on localhost (port 4200). For my client i used the Basic Setup as shown in the Apollo docs and made a few Adjustments to it. If I look at the request in the browser I can see that Apollo is using the Method Options. As far as I graphql Server doesnt support the Options method. So how can I get my client to use the get or post method or allow the Options method?
My client scrpit:
import {Component, OnInit} from '#angular/core';
import {Apollo} from 'apollo-angular';
import gql from 'graphql-tag';
#Component({
selector: 'app-patient',
template: `
<div *ngIf="loading">
Loading...
</div>
<div *ngIf="error">
Error :(
</div>
<div *ngIf="allPatients">
<div *ngFor="let patient of allPatients">
<p>{{patient.id}}</p>
</div>
</div>
`,
})
export class PatientComponent implements OnInit {
allPatients: any[];
loading = true;
error: any;
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo
.watchQuery<any>({
query: gql`
{
allPatients {
id
}
}
`,
})
.valueChanges.subscribe(result => {
this.allPatients = result.data && result.data.allPatients;
this.loading = result.loading;
this.error = result.errors;
});
}
}
And here is my server scrpit file:
var express = require('express');
var graphqlHTTP = require('express-graphql');
var { buildSchema } = require('graphql');
// Construct a schema, using GraphQL schema language
var schema = buildSchema(`
type Patient {
id: String
}
type Query {
allPatients: [Patient]
}
`);
// The root provides a resolver function for each API endpoint
var root = {
allPatients: () => {
return [{id: "testID1"}, {id: "testID2"}];
},
};
var graphQLApp = express();
graphQLApp.use('/graphql', graphqlHTTP({
schema: schema,
rootValue: root,
graphiql: true,
}));
graphQLApp.listen(4000);
console.log('Running a GraphQL API server at http://localhost:4000/graphql');

Related

Getting TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON when trying to call a back end api with Trcp

I am planning on building an app using SST and tRPC. I have never used either so I am going through the docs and quick start to better understand the material. I came across an issue where the call is not rendering on the front end. Im not sure if I have the router wrong or something else in the backend. Everytime I make a request it will give this error TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON. But im not sure where its coming from.
Stacks
import { StackContext, Api, ViteStaticSite } from "#serverless-stack/resources";
export function MyStack({ stack }: StackContext) {
const api = new Api(stack, "api", {
routes: {
"GET /todo": "functions/todo.handler"
},
cors : true,
});
const site = new ViteStaticSite(stack, "site", {
path: "frontend",
buildCommand: "npm run build",
environment: {
REACT_APP_API_URL: api.url,
},
});
stack.addOutputs({
SITE: site.url,
});
}
router
import { initTRPC } from '#trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
const appRouter = t.router({
greeting: t.procedure
.input(
z.object({
name: z.string(),
})
)
.query(({input}) => {
return {
text: `Hello ${input?.name ?? 'world'}`
};
}),
});
export type AppRouter = typeof appRouter;
import { awsLambdaRequestHandler } from '#trpc/server/adapters/aws-lambda';
export const handler = awsLambdaRequestHandler({
router: appRouter
})
frontend
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client'
import './index.css'
import { QueryClient, QueryClientProvider } from '#tanstack/react-query';
import { httpBatchLink } from '#trpc/client';
import { trpc } from './trpc';
const apiUrl = import.meta.env.REACT_APP_API_URL;
function App() {
const [queryClient] = useState(() => new QueryClient());
const [trpcClient] = useState(() =>
trpc.createClient({
links: [
httpBatchLink({
url: `${apiUrl}/todo`
}),
],
}),
);
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<Sample />
</QueryClientProvider>
</trpc.Provider>
);
}
function Sample(){
const result = trpc.greeting.useQuery({name: 'will'})
return (
<div>
<div>{result.isLoading ? "Loading..." : result.data?.text}</div>
</div>
)
}

Apollo subscriptions - Nextjs - Error: Observable cancelled prematurely at Concast.removeObserver

I am trying to use apollo/graphql subscription in my nextjs project, my graphql server is placed in external nextjs service,I can work with queries and mutation without any problem but when I use an implementation of useSubscription I get the following error:
"Error: Observable cancelled prematurely
at Concast.removeObserver (webpack-internal:///../../node_modules/#apollo/client/utilities/observables/Concast.js:118:33)
at eval (webpack-internal:///../../node_modules/#apollo/client/utilities/observables/Concast.js:21:47)
at cleanupSubscription (webpack-internal:///../../node_modules/zen-observable-ts/module.js:92:7)
at Subscription.unsubscribe (webpack-internal:///../../node_modules/zen-observable-ts/module.js:207:7)
at cleanupSubscription (webpack-internal:///../../node_modules/zen-observable-ts/module.js:97:21)
at Subscription.unsubscribe (webpack-internal:///../../node_modules/zen-observable-ts/module.js:207:7)
at eval (webpack-internal:///../../node_modules/#apollo/client/react/hooks/useSubscription.js:106:26)
at safelyCallDestroy (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:22763:5)
at commitHookEffectListUnmount (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:22927:11)
at invokePassiveEffectUnmountInDEV (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:24998:13)
at invokeEffectsInDev (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:27137:11)
at commitDoubleInvokeEffectsInDEV (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:27110:7)
at flushPassiveEffectsImpl (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26860:5)
at flushPassiveEffects (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26796:14)
at eval (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26592:9)
at workLoop (webpack-internal:///../../node_modules/scheduler/cjs/scheduler.development.js:266:34)
at flushWork (webpack-internal:///../../node_modules/scheduler/cjs/scheduler.development.js:239:14)
at MessagePort.performWorkUntilDeadline (webpack-internal:///../../node_modules/scheduler/cjs/scheduler.development.js:533:21)"
I know that the subscriptions server is working right because I can to listening from apollo studio and I have created a spa with create-react-app and it works fine
I have used:
Server:
"apollo-server-express": "^3.6.7"
"graphql-ws": "^5.7.0"
Client
"next": "^12.1.5"
"#apollo/client": "^3.5.10"
"graphql-ws": "^5.7.0"
Hook implementation
const room = useSubscription(
gql`
subscription onRoomAdded($roomAddedId: ID!) {
roomAdded(id: $roomAddedId) {
id
name
}
}
`
);
Client implementation
import { ApolloClient, HttpLink, InMemoryCache, split } from '#apollo/client';
import { GraphQLWsLink } from '#apollo/client/link/subscriptions';
import { getMainDefinition } from '#apollo/client/utilities';
import { createClient } from 'graphql-ws';
import fetch from 'isomorphic-fetch';
const HOST = 'http://localhost:3001/graphql';
const HOST_WS = 'ws://localhost:3001/graphql';
const isServer = typeof window === 'undefined';
if (isServer) {
global.fetch = fetch;
}
const httpLink = new HttpLink({
uri: HOST,
});
const link = isServer
? httpLink
: split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
new GraphQLWsLink(
createClient({
url: HOST_WS,
})
),
httpLink
);
const client = new ApolloClient({
ssrMode: isServer,
link,
cache: new InMemoryCache(),
});
export default client;
any idea about the problem? I think the problem could be that NextJS only works with subscriptions-transport-ws but in the official apollo documentation indicates that the new official way is to use graphql-ws the other library is unmaintained already
UPDATE!
I have checked that the subscriptions are working right in production build, I'm investigating how to implement in development process. any suggestions are welcome.
If it is working in production, but in not in dev, you may have the same issue I had with my React SPA: StrictMode and double rendering as described in this github issue.
So far I have found 2 ways to make it work:
remove StrictMode
subscribe with vanilla JS instead ofuseSubscription
const ON_USER_ADDED = gql`
subscription OnUserAdded {
userAdded {
name
id
}
}
`;
const subscribe = () => {
client.subscribe({
query: ON_USER_ADDED,
}).subscribe({
next(data) {
console.log('data', data);
},
complete(){
console.log('complete');
},
error(err) {
console.log('error', err);
}
})
};

Graphql Bad Request on page load

Hello Everyone and Happy Holidays,
I'm building a website with KeystoneJS and NextJS. I have added Apollo Client in between.
However, I'm having an issue with Apollo Client now. I have tried different places to put in as well but the result was the same, Anyway here is my _app.tsx file
import { useReducer } from "react";
import { useRouter } from "next/router";
import { ThemeProvider } from "styled-components";
import { HttpLink } from "apollo-link-http";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { Query, KeystoneProvider } from "#keystonejs/apollo-helpers";
import { ApolloProvider, gql } from "#apollo/client";
import { primaryTheme } from "../styles/theme";
import GlobalStyle from "../styles/global";
import { initialState, globalReducer } from "../context/reducer";
import Meta from "../components/global/Meta";
import { Header } from "../components/global/Header";
import { globalContext } from "../context/contex";
import Footer from "../components/global/Footer";
import Loading from "../components/global/Loading";
const client = new ApolloClient({
ssrMode: true,
cache: new InMemoryCache(),
link: new HttpLink({
uri: process.env.NEXT_PUBLIC_API_URL,
fetchOptions: {
mode: 'cors'
},
}),
});
const QUERY = gql`
query {
allOperations{
id
name
}
}
`
const MyApp = ({ Component, pageProps }) => {
const [store, dispatch] = useReducer(globalReducer, initialState);
const router = useRouter();
return (
<ApolloProvider client={client}>
<KeystoneProvider>
<ThemeProvider theme={primaryTheme}>
<Meta />
{router.route !== "/" && <Header />}
<Query
query={QUERY}
>
{({ loading, data }) => {
console.log(data);
if(loading){
return <Loading />
} else {
return <Component {...pageProps} />
}}}
</Query>
<Footer />
<GlobalStyle />
</ThemeProvider>
</KeystoneProvider>
</ApolloProvider>
);
};
export default MyApp;
On page load on every page, I get this 400 Bad request Error says
{errors: [{,…}]}
errors: [{,…}]
0: {,…}
extensions: {code: "GRAPHQL_VALIDATION_FAILED", exception: {stacktrace: [,…]}}
code: "GRAPHQL_VALIDATION_FAILED"
exception: {stacktrace: [,…]}
stacktrace: [,…]
0: "GraphQLError: Field "queries" of type "_ListQueries" must have a selection of subfields. Did you mean "queries { ... }"?"
1: " at Object.Field (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/validation/rules/ScalarLeafsRule.js:40:31)"
2: " at Object.enter (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/language/visitor.js:323:29)"
3: " at Object.enter (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/utilities/TypeInfo.js:370:25)"
4: " at visit (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/language/visitor.js:243:26)"
5: " at Object.validate (/Users/artticfox/Desktop/Work/frank/backend/node_modules/graphql/validation/validate.js:69:24)"
6: " at validate (/Users/artticfox/Desktop/Work/frank/backend/node_modules/apollo-server-core/dist/requestPipeline.js:221:34)"
7: " at Object.<anonymous> (/Users/artticfox/Desktop/Work/frank/backend/node_modules/apollo-server-core/dist/requestPipeline.js:118:42)"
8: " at Generator.next (<anonymous>)"
9: " at fulfilled (/Users/artticfox/Desktop/Work/frank/backend/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)"
10: " at runMicrotasks (<anonymous>)"
11: " at processTicksAndRejections (internal/process/task_queues.js:93:5)"
locations: [{line: 5, column: 7}]
0: {line: 5, column: 7}
column: 7
line: 5
message: "Field "queries" of type "_ListQueries" must have a selection of subfields. Did you mean "queries { ... }"?"
name: "ValidationError"
uid: "ckjbkc1j9001qng0d2itof7d9"
but I don't request list queries at all.
The first 2 API calls are 204 last one is 200 and I get the query fine. My assumption is this is happening because of SSR but I need a solution. I tried to pass by with loading and stuff as well but it didn't work.
And here is my KeystoneJS setup.
const { Keystone } = require("#keystonejs/keystone");
const { GraphQLApp } = require("#keystonejs/app-graphql");
const { AdminUIApp } = require("#keystonejs/app-admin-ui");
const { MongooseAdapter: Adapter } = require("#keystonejs/adapter-mongoose");
const { PasswordAuthStrategy } = require("#keystonejs/auth-password");
const { NextApp } = require('#keystonejs/app-next');
require("dotenv").config();
const OperationSchema = require("./lists/Operation.ts");
const UserSchema = require("./lists/User.ts");
const PROJECT_NAME = "frank";
const adapterConfig = {
mongoUri: process.env.DATABASE,
};
/**
* You've got a new KeystoneJS Project! Things you might want to do next:
* - Add adapter config options (See: https://keystonejs.com/keystonejs/adapter-mongoose/)
* - Select configure access control and authentication (See: https://keystonejs.com/api/access-control)
*/
const keystone = new Keystone({
adapter: new Adapter(adapterConfig),
});
keystone.createList("Operation", OperationSchema);
keystone.createList("User", UserSchema);
const authStrategy = keystone.createAuthStrategy({
type: PasswordAuthStrategy,
list: "User",
config: {
identityField: "username",
secretField: "password",
},
});
module.exports = {
keystone,
apps: [
new GraphQLApp(),
new AdminUIApp({ name: PROJECT_NAME, enableDefaultRoute: false }),
new NextApp({ dir: '../frontend/' }),
],
};
Backend is running on localhost:3000
The frontend is running on localhost:7777
Thanks in advance.
Happy Holidays
I was having the same issue and have figured out a workaround for this.
The error is being caused by an outdated GraphQL query in the #keystonejs/apollo-helpers. You can go through an update the code in the dist directory and update all files that include the META_QUERY variable to include the missing query subfields.
query ListMeta {
_ksListsMeta {
schema {
type
queries {
item
list
meta
__typename
}
relatedFields {
type
fields
}
}
}
}
Please keep in mind this workaround will not work when the #keystonejs/apollo-helpers package is reinstalled / updated.
Found the reason for this error, Keystoneprovider was creating this issue for some reason. If anybody knows the reason, it would be nice to know the reason.

Unknown type "Upload" in Apollo Server 2.6

I want to upload a file through GraphQL, and followed this article.
Here's the my schema:
extend type Mutation {
bannerAdd(
title: String!
image: Upload
): ID
}
However when I run the app, this gives me this error:
Unknown type "Upload". Did you mean "Float"?
Followed above article, Apollo Server will automatically generate Upload scalar, but why this is happening?
Also define Upload scalar manually also not working:
scalar Upload
...
Gives me this error:
Error: There can be only one type named "Upload".
Seems nothing wrong with my code. Is there an anything that I missed? Using Node#10.14.2, Apollo Server#2.6.1, Apollo Server Express#2.6.1 and polka#0.5.2.
Any advice will very appreciate it.
Fix this problem with GraphQLUpload of Apollo Server for create a custom scalar called FileUpload.
Server setup with Apollo Server:
const {ApolloServer, gql, GraphQLUpload} = require('apollo-server');
const typeDefs = gql`
scalar FileUpload
type File {
filename: String!
mimetype: String!
encoding: String!
}
type Query {
uploads: [File]
}
type Mutation {
singleUpload(file: FileUpload!): File!
}
`;
const resolvers = {
FileUpload: GraphQLUpload,
Query: {
uploads: (parent, args) => {},
},
Mutation: {
singleUpload: async (_, {file}) => {
const {createReadStream, filename, mimetype, encoding} = await file;
const stream = createReadStream();
// Rest of your code: validate file, save in your DB and static storage
return {filename, mimetype, encoding};
},
},
};
const server = new ApolloServer({
typeDefs,
resolvers,
});
server.listen().then(({url}) => {
console.log(`🚀 Server ready at ${url}`);
});
Client Setup with Apollo Client and React.js:
You need to install the apollo-upload-client package too.
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useMutation } from '#apollo/client';
import { createUploadLink } from 'apollo-upload-client';
const httpLink = createUploadLink({
uri: 'http://localhost:4000'
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
});
const UPLOAD_FILE = gql`
mutation uploadFile($file: FileUpload!) {
singleUpload(file: $file) {
filename
mimetype
encoding
}
}
`;
function FileInput() {
const [uploadFile] = useMutation(UPLOAD_FILE);
return (
<input
type="file"
required
onChange={({target: {validity, files: [file]}}) =>
validity.valid && uploadFile({variables: {file}})
}
/>
);
}
function App() {
return (
<ApolloProvider client={client}>
<div>
<FileInput/>
</div>
</ApolloProvider>
);
}
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
Here's the solution what I did, adding custom scalar named "FileUpload" and add GraphQLUpload as resolver like this:
import { GraphQLUpload } from 'graphql-upload';
export const resolvers = {
FileUpload: GraphQLUpload
};
It works great, but it could be not perfect solution. Hope apollo fix this soon.
P.S. To upload file from your browser, you also need to set upload link in Apollo Client properly. Here's my code:
import { ApolloLink, split } from 'apollo-link';
import { createHttpLink } from 'apollo-link-http';
import { createUploadLink } from 'apollo-upload-client';
// Create HTTP Link
const httpLink = createHttpLink({
uri: ...,
credentials: 'include'
});
// Create File Upload Link
const isFile = value =>
(typeof File !== 'undefined' && value instanceof File) || (typeof Blob !== 'undefined' && value instanceof Blob);
const isUpload = ({ variables }) => Object.values(variables).some(isFile);
const uploadLink = createUploadLink({
uri: ...
credentials: 'include'
});
const terminatingLink = (isUpload, uploadLink, httpLink);
const link = ApolloLink.from([<Some Other Link...>, <Another Other Link...>, terminatingLink]);
const apolloClient = new ApolloClient({
link,
...
});
This issue can be caused by passing an executable schema (schema option) when initializing your server instead of the newer API of passing typeDefs and resolvers separately.
Old:
const server = new ApolloServer({
schema: makeExecutableSchema({ typeDefs, resolvers })
})
New:
const server = new ApolloServer({
typeDefs,
resolvers,
})
Or as explained in the docs:
Note: When using typeDefs, Apollo Server adds scalar Upload to your schema, so any existing declaration of scalar Upload in the type definitions should be removed. If you create your schema with makeExecutableSchema and pass it to ApolloServer constructor using the schema param, make sure to include scalar Upload.

localhost REST API request error ionic2 angular2

I am making a get/post request to my locally hosted REST API server in an Ionic 2 app. The errow below shows up afer a couple of seconds.
3 387557 group EXCEPTION: Response with status: 0 for URL: null
4 387558 error EXCEPTION: Response with status: 0 for URL: null
5 387558 groupEnd
6 387568 error Uncaught Response with status: 0 for URL: null, http://localhost:8100/build/js/app.bundle.js, Line: 88826
I am able to make a successful curl request to the local server. Here is my code for reference.
app.js
var express = require("express");
var mysql = require("mysql");
var bodyParser = require("body-parser");
var SHA256 = require("sha256");
var rest = require("./REST.js");
var app = express();
function REST(){
var self = this;
self.connectMysql();
};
REST.prototype.connectMysql = function() {
var self = this;
var pool = mysql.createPool({
connectionLimit : 100,
host : 'host',
user : 'user',
password : 'password',
database : 'database',
debug : false
});
pool.getConnection(function(err,connection){
if(err) {
self.stop(err);
} else {
self.configureExpress(connection);
}
});
}
REST.prototype.configureExpress = function(connection) {
var self = this;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var router = express.Router();
app.use('/api', router);
var rest_router = new rest(router,connection,SHA256);
self.startServer();
}
REST.prototype.startServer = function() {
app.listen(3000, function() {
console.log("All right ! I am alive at Port 3000. OKAY BUDDY");
});
}
REST.prototype.stop = function(err) {
console.log("ISSUE WITH MYSQL n" + err);
process.exit(1);
}
new REST();
REST.js
var mysql = require("mysql");
function REST_ROUTER(router, connection, SHA256) {
var self = this;
self.handleRoutes(router, connection, SHA256);
}
REST_ROUTER.prototype.handleRoutes= function(router,connection,SHA256) {
router.get("/",function(req,res){
res.json({'foo': 'bar'});
});
});
login.js (component)
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {AuthProvider} from '../../providers/auth/auth';
/*
Generated class for the LoginPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
templateUrl: 'build/pages/login/login.html',
providers: [AuthProvider]
})
export class LoginPage {
static get parameters() {
return [[NavController], [AuthProvider]];
}
constructor(nav, AuthProvider) {
this.nav = nav;
this.authProvider = AuthProvider;
this.form = {};
}
login(form) {
this.authProvider.login(form).then(res => {
alert(JSON.stringify(res));
});
}
}
auth.js (provider)
import {Injectable} from '#angular/core';
import {Http, Headers, RequestOptions} from '#angular/http';
import 'rxjs/add/operator/map';
/*
Generated class for the Auth provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
#Injectable()
export class AuthProvider {
static get parameters(){
return [[Http]]
}
constructor(http) {
this.url = 'http://localhost:3000/api';
this.http = http;
}
login(form) {
return new Promise(resolve => {
this.http.get(this.getUrl)
.map(res => res.json())
.subscribe(data => {
resolve(data);
});
});
}
}
I had the same problem, and was able to resolve it. I was serving my API on localhost:8000. When ionic makes a request to localhost or 127.0.0.1, I think it is blocked. I instead found my computer's IP address and hosted my webserver on 0.0.0.0:8000 and instead of hitting http://localhost:8000/api/my/endpoint I hit http://mycomputerip:8000/api/my/endpoint, and it worked!
You are trying to request empty URL bacause of typo in auth.js login function:
this.http.get(this.getUrl)
this.getUrl is not defined in your code samples. Easy fix:
this.http.get(this.url)

Resources