Integrating Apollo to meteor app - meteor

When I'm trying to integrate an apollo server to a meteor app I get errors as soon as I try to open graphiql. If I create an express app and connect it with webapp.connectHandlers, and put apollo server to one of that express app's routes, thing work, but they don't work in "meteor way", which I would really like to have, since I would get access to the user object, authorization etc.
Error, which I see in graphiql as soon as it loads:
Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory
stacktrace:
at invariant (/Users/.../node_modules/graphql/jsutils/invariant.js:18:11)<br> at Object.validate (/Users/.../node_modules/graphql/validation/validate.js:59:72)<br> at doRunQuery (/Users/.../node_modules/apollo-server-core/dist/runQuery.js:88:38)<br> at /Users/.../node_modules/apollo-server-core/dist/runQuery.js:22:54<br> at /Users/.../.meteor/packages/promise/.0.10.0.borizy.o9z8++os+web.browser+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40
server code:
import {makeExecutableSchema} from 'graphql-tools';
import {typeDefs} from './schema';
import {resolvers} from './resolvers';
import { createApolloServer } from 'meteor/apollo';
export const schema = makeExecutableSchema({
typeDefs,
resolvers
});
createApolloServer({
schema
});
Everything seems legit and works with express, but not with meteor. What is the reason? How can I fix it?

The current version of meteor/apollo is out of date with the latest apollo npm packages. https://github.com/Swydo/ddp-apollo is up-to-date and does the integration in a "meteor way" 😊

Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory
If this is the problem, it would be solved by
rm -rf node_modules/*
npm install

Related

Cloud Firestore build error with preact-cli

I'm trying to use Firebase's Cloud Firestore from a preact-cli generated project but have been caught at the first hurdle. I chose Firebase's v9 SDK, that's in beta, to get ahead of the curve (but maybe that was a mistake). When building, there's an error from a Firebase SDK file but I'm not sure if it's caused by the SDK itself, babel, webpack, preact-cli or a combination. I also don't know how to go about diagnosing it, since I'm new to these tools.
Steps below, any ideas what the cause of this error might be?
npx preact-cli create typescript webapp
npm install --save firebase#9.0.0-beta.1
Then in src/components/app.tsx, make use of the Firestore SDK by adding
import { getFirestore } from "firebase/firestore";
getFirestore();
But the build fails.
$ npm run build
> webapp#0.0.0 build
> preact build
Build [== ] 12% (1.3s) building(13200:6) switch-case fall-through not supported - added break. See https://github.com/MatAtBread/nodent#differences-from-the-es7-specification
[BABEL] Note: The code generator has deoptimised the styling of ../node_modules/#firebase/firestore/dist/exp/index.browser.esm2017.js as it exceeds the max of 500KB.
✖ ERROR ../node_modules/#firebase/firestore/dist/exp/index.browser.esm2017.js 5055:431
Module parse failed: Unsyntactic break (5055:431)
File was processed with these loaders:
* ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
(Source code omitted for this binary file)
# ../node_modules/firebase/firestore/dist/index.esm.js 1:0-36 1:0-36
# ./components/app.tsx
# ./index.ts

create-next-app does not work, get internal server error

Need some advice on this. I have initialize a whole new project by using create-next-app:
npx create-next-app nextjs-app
I was able to start the project by calling npm run dev. This is what i have in the terminal when run on the development server:
ready - started server on http://localhost:3000
However, i get internal server error when navigate to localhost:3000. There is this error on the terminal:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I am running on node v12.16.3 and npm v6.14.4

Vuejs2 firebase with electron error

I have configured electron with vuejs and i would like to add firebae to my project so i have
In my main.js
import * as firebase from 'firebase'
let firebasconfig = {
//config from firebase project
};
Vue.prototype.$firebase = firebase.initializeApp(firebasconfig);
But now am getting an error
Error: Failed to load gRPC binary module because it was not installed
for the current system
Expected directory: electron-v1.8-linux-x64-glibc
Found: [node-v59-linux-x64-glibc]
This problem can often be fixed by running "npm rebuild" on the current system
Original error: Cannot find module
I have tried running rebuild but still fails
What elese do i need to do for this to work
I encouter the same issue with
vue-electron 1.0.6
firebase 5.4.2
vuefire 1.4.5
node 6.10.3
The following manipulation has worked for me. I have downgraded :
firebase to 4.6.0
vuefire to 1.4.4
Then ran npm rebuild and yarn and now it works.
I'm not sure all the things I have done are necessary. But for sure it looks like a problem with firebase.

meteor keycloak third party

i want to test a keycloak request/response with a keycloak server in a docker file running on my localy machine.
The package Keycloak in atmospherejs doesnt work so i decided to include it to my meteor projekt as a third party library.
I put the library in a public/compatibility/keycloak/keycloak.js
The Autocomplete find it but if i use it then im getting a bug.
Exception while invoking method 'getTestToken' ReferenceError: Keycloak is not defined
But i do not understand it because it is correctly implemented as a thid party library in meteor. Can anybody help me to get this done?
Here I packaged the adapter library for meteor. Have not published it because I need to fork the original library and other stuff. Now you can call KeyCloak() on the client. Here's how I tested it in my router.js:
import { Keycloak } from 'meteor/mutdmour:keycloak'
Router.configure({
waitOn: [
function() {
console.log(Keycloak());
}
]
});
Here's what you can do to replicate what I did with other libraries:
create a package, now you can find it in your packages folder
meteor create --package mutdmour:keycloak
copied over the keycloak.js into packages/keycloak
changed the package.js file to reference the mainModule to run only on the client. This is why you are getting 'window is not defined'. Because it's running on the server. You could try putting that import in a if (Meteor.isClient()){...}
api.mainModule('keycloak.js', 'client');
added an export to package.js
api.export('Keycloak', 'client');
add the word export to the Keycloak definition in keycloak.js
export var Keycloak =
add the package
meteor add mutdmour:keycloak

GraphiQL for Apollo Fine on Desktop, 404 on Laptop?

I've got GraphIQL running fine on my desktop Mac at http://localhost:8080/graphql.
And on my laptop Mac, using the exact same code synced via Github, I show this in the console:
GraphQL Server is now running on http://localhost:8080/graphql
...which appears to indicate that graphql is connected. But accessing
http://localhost:8080/graphql brings up a 404 error:
Not Found
The requested URL /graphql was not found on this server
I even deleted my node_modules folder and reinstalled from scratch via meteor npm install.
Does this make sense to anybody?
Here's the code that sets up Apollo and graphiql:
//apollo
import express from 'express';
import { apolloServer } from 'apollo-server';
import Schema from '/imports/api/schema';
import Mocks from '/imports/api/mocks';
import Resolvers from '/imports/api/resolvers';
import Connectors from '/imports/api/db-connectors';
const GRAPHQL_PORT = 8080;
const graphQLServer = express();
graphQLServer.use('/graphql', apolloServer({
graphiql: true,
schema: Schema,
resolvers: Resolvers,
connectors: Connectors,
mocks: Mocks,
}));
graphQLServer.listen(GRAPHQL_PORT, () => console.log(
`GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql`
));
So, this could be because you have something else running on 8080 on your laptop. Maybe try logging uncaught express errors to the console?
Another possibility is that you're not trying exactly the same URL on your desktop. Version 0.2 of apolloServer currently allows only POST requests. When you navigate to the address in your browser, it will try to send a GET request, which will result in a 404. Try spinning up graphiql on a separate route and see if you can access that.
PS: If you get a chance, you should make a PR to the repo where you copy-pasted the code snippet from, so other people won't run into the same issue ;-)
I used npm remove apollo-server and npm install apollo-server --save to update the apollo-server npm module, and did the same for apollo-client. I then updated to the apollo server 0.2.x code found at http://docs.apollostack.com/apollo-server/migration.html. I also updated to Meteor 1.4.x. Now the 404 error is gone.

Resources