Everytime when I created a graphQL server with ApolloServer and express when I navigate to http//:localhost:4000/graphql it opens me a sandbox which looks like:
What i really want to do is to open a graphql playground which looks like this
The reason i want this playground it's because it allows me to works with cookies very eaisly. I was thinking installing this exextion on my chrome browser will help. Unfortunately it did not work. Here is the instance of my ApolloSever with express in code:
const apolloServer = new ApolloServer({
schema: await buildSchema({
resolvers: [HelloResolver, TodoResolver, AuthResolver],
validate: false,
}),
});
await apolloServer.start();
apolloServer.applyMiddleware({ app });
Please if you know where what i'm missing help. t has been hours sitting here nothing works
Wow! After some hours i realized that I was looking for answers at wrong places. I started reading the docs line by line only to found out that the feature i wanted if for Apollo Server 2 and I'm using Apollo Server 3. So to solve this I had to go to my ApolloServer instance and add the following under plugins option:
...
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
...
const apolloServer = new ApolloServer({
....
plugins: [ApolloServerPluginLandingPageGraphQLPlayground({})],
});
Related
pls check the below code,
// npm install #apollo/server express graphql cors body-parser
import { ApolloServer } from '#apollo/server';
import { expressMiddleware } from '#apollo/server/express4';
import { ApolloServerPluginDrainHttpServer } from '#apollo/server/plugin/drainHttpServer';
import express from 'express';
import http from 'http';
import cors from 'cors';
import bodyParser from 'body-parser';
import { typeDefs, resolvers } from './schema';
// Required logic for integrating with Express
const app = express();
// Our httpServer handles incoming requests to our Express app.
// Below, we tell Apollo Server to "drain" this httpServer,
// enabling our servers to shut down gracefully.
const httpServer = http.createServer(app);
// Same ApolloServer initialization as before, plus the drain plugin
// for our httpServer.
const server = new ApolloServer({
typeDefs,
resolvers,
plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
});
// Ensure we wait for our server to start
await server.start();
// Set up our Express middleware to handle CORS, body parsing,
// and our expressMiddleware function.
app.use(
'/',
cors(),
bodyParser.json(),
// expressMiddleware accepts the same arguments:
// an Apollo Server instance and optional configuration options
expressMiddleware(server, {
context: async ({ req }) => ({ token: req.headers.token }),
}),
);
// Modified server startup
await new Promise((resolve) => httpServer.listen({ port: 4000 }, resolve));
console.log(`🚀 Server ready at http://localhost:4000/`);
The code is from official documentation of apollo server, My question is, here we are first creating an apollo server and converting it to express server using expressMiddleware(server),
Will there be any issues with this conversion ?
Will we face any lack of control over the converted express server ?
My question is, here we are first creating an apollo server and converting it to express server using expressMiddleware(server),
That's not what you're doing at all.
You created an express server (const app = express()).
You created a separate http server from that app.
You created a running executable GraphQL Server.
You created an express middleware ((req, res, next) => void) that generates a context of { token?: string }, parses the body of your request into a GraphQL payload and then executes against the GraphQL Server with that context and with that payload.
You then added that express middleware to a route you created at "/", along with other middleware you attached before it.
You started the httpServer you created in #2
Will there be any issues with this conversion ?
Will we face any lack of control over the converted express server ?
This is no conversion, as mentioned. Hopefully you now understand that.
You created all of those things. Your express app is a variable called app. Do whatever you want with it. Your http server is a variable called httpServer. Do whatever you want with it.
I'm new to the node world and I'm having issues setting up my Nuxt3 project to use Apollo, but I think most of it is lack of knowledge with node and Nuxt.
Everything works fine when the setup code is in app.vue but I want it in a separate file to keep things tidy.
This is my latest attempt, I also tried using /server/api to return values, but I ran into top-level await issues.
I created a Stack Blitz instance to show what's happening. It renders successfully once, then shows an undefined error underneath. In my project, it's similar in a way where I see a flash of content, and then an empty white page and a console error that spaceId is undefined (braking the url).
plugins/apollo.ts
import { ApolloClient,createHttpLink,InMemoryCache} from '#apollo/client/core';
import { createApp, provide, h } from 'vue';
import { DefaultApolloClient,provideApolloClient} from '#vue/apollo-composable';
export default defineNuxtPlugin(async (nuxtApp) => {
const config = useRuntimeConfig();
const httpLink = createHttpLink({
uri: `https://someapi/${config.spaceID}/`,
headers: {
Authorization: `Bearer ${config.token}`,
},
});
// Cache implementation
const cache = new InMemoryCache();
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
});
provideApolloClient(apolloClient);
});
Thanks
I'm trying to set up Sveltekit, Supabase and Vercel.
It works correctly on a local environment (SvelteKit and Supabase), but when I deploy it to Vercel there is a problem with Supabase - "Error: supabaseUrl is required" (I post a screenshot below).
If I don't use Supabase, there are no problems with deploying to Vercel.
Please someone if you have encountered a similar one or have a suggestion to share.
I finally got this to work after doing a couple of things I pieced together from a few sources.
First, I added the the environment variables in Vercel just as the were in the .env file. For example, VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY along with their values.
Next, I added some code in the svelte.config.js file. The result of the file looks like this:
import adapter from '#sveltejs/adapter-auto'
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
vite: {
define: {
'process.env': process.env,
},
},
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
},
}
export default config
I redeployed the project at Vercel, and it worked.
You should add your Supabase URL and Supabase ANON KEY to vercel and stick to the format given below VITE_SUPABASE_URL,VITE_SUPABASE_ANON_KEY if you have initialized according to the supabase guide.
More than adding the configuration to your svelte.config.js file, you should emphasize on adding environment variables to your Vercel environment if you have added this file
// utils/supabase.js
import { createClient } from '#supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
it's been around two weeks that I'm dealing with this problem.
at first, it did not work at all. After spending several days searching for a solution I could fix it by adding these lines of code to my index.js file.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
GLOBAL.originalXMLHttpRequest :
GLOBAL.XMLHttpRequest;
global.Blob = null
After that, it worked fine in the development mode and everything was fine.
But as soon as I released my app I realized it does not work in the release build!
I'm kind of sure it's a problem with fetch API that apollo uses behind the scenes. But I don't know what to do to fix it.
I also tried to run a new project and paste my code on it, but no luck.
this is my apollo client code:
import ApolloClient from 'apollo-client'
import Statics from './statics'
import {HttpLink} from 'apollo-link-http'
import { InMemoryCache } from '#apollo/client';
const customFetch = (uri, options) => {
return fetch(uri, options)
.then(response => {
if (response.status >= 500) { // or handle 400 errors
return Promise.reject(response.status);
}
return response;
});
};
export const client = new ApolloClient({
link: new HttpLink({uri:`${Statics.baseUrl}/graphql`, fetch:customFetch}) ,
cache: new InMemoryCache(),
});
Try using isomorphic-fetch instead of fetch
I have a project built with Nuxt.js and I want to use express to be able to report bugsnag errors on my asyncData method etc.
How would I go to import that? I suppose is not as simple as npm install express --save.
I already have an api written in PHP so I would not use that as an api or anything else.
Is it overkill? Or is it a necessary evil? :D
To start using Express with an existing Nuxt project, you'll need to set up a simple server.js file that sets up your Express server and adds your Nuxt application as middleware. The only slight complication is setting it up to auto-rebuild in development. Here's a quick example server.js file that pulls in Nuxt and handles building when not in production.
const { Nuxt, Builder } = require('nuxt');
const app = require('express')();
// We instantiate Nuxt.js with the options
const isProd = process.env.NODE_ENV === 'production';
const config = require('./nuxt.config.js');
config.dev = !(isProd);
const nuxt = new Nuxt(config);
// No build in production
if (!isProd) {
const builder = new Builder(nuxt);
builder.build();
}
app.use(nuxt.render);
app.listen(3000);
console.log('Server is listening on http://localhost:3000');
You can then incorporate bugsnag as you normally would in express, I assume by requiring it and including it as middleware.
You dont need express to handle errors in asyncData. To handle errors in asyncData/fetch on ssr you just need to hook into render:errorMiddleware. See sentry plugin for nuxt for example
But it would only catch errors that happens on SSR. On client unfortunately that wont catch anything ( as well as express wont do anything for client). There is a bug for this in nuxt see here