Record the process of migrating Apollo server V3 once

Time:2022-6-18

preface

Apollo Server V3It’s almost half a year since I came out. It’s time toexpress-postgres-ts-starterThe graphql section of has been upgraded.

Use the dependbot help to update the version

dependabotIt is a GitHub tool (it seems to support gitlab, but I’m not sure). It is used to detect repo dependency security. It can also help me update the dependency version of repo regularly.

This is the configuration file for my dependbot:

version: 2
updates:
 - package-ecosystem: npm
   directory: '/'
   schedule:
    interval: weekly
   open-pull-requests-limit: 10

Dependencies required for upgrading Apollo server

nodejs

Apollo Servier 3Only nodejsv12 and above versions are supported(Apollo Servier 2Only nodejsv6 support is required). Therefore, you need to upgrade to nodejs12. Node14 and node16 are recommended.

I highly recommend linux/mac usersnvm, for Windows usersnvm-windowsInstall and upgrade the node version.

graphql

Apollo ServierThere is an optional dependencygraphql(the core implementation of graphql JS),Apollo Servier 3needgraphqlV15.3.0 and above.

Problem record

GraphQL Playground

Apollo Server 2Yes default supportGraphQL Playground, we just need to configure it in the constructorplaygroundThis field is fine, butApollo Server 3Removed the default support for graphql playgroun and instead recommended it for non production environmentsApollo Sandbox

But we can still reconfigureGraphQL Playgroundof

If previously usednew ApolloServer({playground: boolean})Configuration in a similar wayGraphQL Playground, then you can

import { ApolloServerPluginLandingPageGraphQLPlayground,
         ApolloServerPluginLandingPageDisabled } from 'apollo-server-core';
new ApolloServer({
  plugins: [
    process.env.NODE_ENV === 'production'
      ? ApolloServerPluginLandingPageDisabled()
      : ApolloServerPluginLandingPageGraphQLPlayground(),
  ],
});

If previously usednew ApolloServer({playground: playgroundOptions})Configuration in a similar wayGraphQL Playground, you can use:

import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core';

const playgroundOptions = {
    //For reference only
    settings: {
        'editor.theme': 'dark',
        'editor.cursorShape': 'line'
    }
}

new ApolloServer({
  plugins: [
    ApolloServerPluginLandingPageGraphQLPlayground(playgroundOptions),
  ],
});

tracing

stayApollo Server 2In, the parameters of the constructor are providedtracingBoolean field to turn on Apollo tracing[https://www.npmjs.com/package/apollo-tracing]Tracking mechanism, but unfortunately, inApollo Server 3Medium,tracingHas been deleted,,,apollo-tracingIt has also been abandoned. If it must be used, you can:

new ApolloServer({
  plugins: [
    require('apollo-tracing').plugin()
  ]
});

However, it is worth noting that the solution has not been strictly tested and may have bugs.

You must await server.start() before calling server.applyMiddleware()

stayApollo Server v2.22Provided in_ server. start()_ The purpose of this method is to facilitate the integration of non serverless frameworks (express, fast, hapi, KOA, micro and cloudflare). Therefore, users of these frameworks use theApolloServerStart the graphql service immediately after the object.

const app = express();
const server = new ApolloServer({...});
await server.start();
server.applyMiddleware({ app });

end

Can now be opened in the browserGraphQL Playground, toexpress-postgres-ts-starterFor example, usehttp://127.0.0.1:3000/graphqlYou can see the effect.

statement

Original link

Recommended Today

How to write an avatar component with ripple effect by using react

Author: stony Chen Take a look at the final effect first, as shown in the following figure: We refer to the component effect and stylehttps://v4.mui.com/components…However, component properties are somewhat different from material UI. In addition, we also made an additional ripple effect surrounded by avatar components. List of components and attributes to be completed: Step […]