CODEWITHSUNDEEP
graphqlnext.jsapolloapollo-clientapollo-server
terroirnoir
terroirnoir

Reputation: 43

Apollo Server + Next.js - GraphQL Schema Not Updating

I have an Apollo GraphQL / Next.js application. After changing my graphql schema and navigating to the graphql playground at "http://localhost:3000/api/graphql", the old schema is still being referenced in the playground and in my application.

I've tried clearing node modules and running npm install, clearing cache, restarting everything, and I just can't wrap my head around why my schema is not updating. Am I missing some crucial schema-update step?

Here is my schema for Series and Publisher (note that a SeriesInput requires a Publisher, NOT a PublisherInput):

type Series {
    _id: ID!
    name: String
    altID: String
    publisher: Publisher!
    comics: [Comic]
}

input SeriesInput {
    _id: ID
    name: String!
    altID: String
    publisher: Publisher!
    comics: [Comic]
}

type Mutation {
    addSeries(series: SeriesInput): Series
}

type Query {
    series: [Series]
}

-------------------------

type Publisher {
    _id: ID!
    name: String
    altID: String
    series: [Series]
}

input PublisherInput {
    _id: ID!
    name: String!
    altID: String
    series: [Series]
}

type Mutation {
    addPublisher(publisher: PublisherInput): Publisher
}

type Query {
    publishers: [Publisher]
}

Here is the error message I am getting in GraphQL Playground which is due to the fact that the old series schema requires a PublisherInput type which has a mandatory field of "Name" which I am not passing.

Here is my graphql apollo server code where I am using mergeResolvers and mergeTypeDefs to merge all of the graphql files into a single schema:

import { ApolloServer } from "apollo-server-micro";
import { mergeResolvers, mergeTypeDefs } from "graphql-tools";
import connectDb from "../../lib/mongoose";

// Mutations and resolvers
import { comicsResolvers } from "../../api/comics/resolvers";
import { comicsMutations } from "../../api/comics/mutations";
import { seriesResolvers } from "../../api/series/resolvers";
import { seriesMutations } from "../../api/series/mutations";
import { publishersResolvers } from "../../api/publishers/resolvers";
import { publishersMutations } from "../../api/publishers/mutations";

// GraphQL Schema
import Publishers from "../../api/publishers/Publishers.graphql";
import Series from "../../api/series/Series.graphql";
import Comics from "../../api/comics/Comics.graphql";

// Merge type resolvers, mutations, and type definitions
const resolvers = mergeResolvers([
    publishersMutations,
    publishersResolvers,
    seriesMutations,
    seriesResolvers,
    comicsMutations,
    comicsResolvers,
]);
const typeDefs = mergeTypeDefs([Publishers, Series, Comics]);

// Create apollo server and connect db
const apolloServer = new ApolloServer({ typeDefs, resolvers });
export const config = {
    api: {
        bodyParser: false,
    },
};
const server = apolloServer.createHandler({ path: "/api/graphql" });
export default connectDb(server);

Here is my apollo/next.js code which I used from Vercel's documentation:

 * Code copied from Official Next.js documentation to work with Apollo.js
 * https://github.com/vercel/next.js/blob/6e77c071c7285ebe9998b56dbc1c76aaf67b6d2f/examples/with-apollo/lib/apollo.js
 */

import React, { useMemo } from "react";
import Head from "next/head";
import { ApolloProvider } from "@apollo/react-hooks";
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

let apolloClient = null;

/**
 * Creates and provides the apolloContext
 * to a next.js PageTree. Use it by wrapping
 * your PageComponent via HOC pattern.
 * @param {Function|Class} PageComponent
 * @param {Object} [config]
 * @param {Boolean} [config.ssr=true]
 */
export function withApollo(PageComponent, { ssr = true } = {}) {
    const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
        const client = useMemo(() => apolloClient || initApolloClient(apolloState), []);
        return (
            <ApolloProvider client={client}>
                <PageComponent {...pageProps} />
            </ApolloProvider>
        );
    };

    // Set the correct displayName in development
    if (process.env.NODE_ENV !== "production") {
        const displayName = PageComponent.displayName || PageComponent.name || "Component";

        if (displayName === "App") {
            console.warn("This withApollo HOC only works with PageComponents.");
        }

        WithApollo.displayName = `withApollo(${displayName})`;
    }

    if (ssr || PageComponent.getInitialProps) {
        WithApollo.getInitialProps = async (ctx) => {
            const { AppTree } = ctx;

            // Initialize ApolloClient, add it to the ctx object so
            // we can use it in `PageComponent.getInitialProp`.
            const apolloClient = (ctx.apolloClient = initApolloClient());

            // Run wrapped getInitialProps methods
            let pageProps = {};
            if (PageComponent.getInitialProps) {
                pageProps = await PageComponent.getInitialProps(ctx);
            }

            // Only on the server:
            if (typeof window === "undefined") {
                // When redirecting, the response is finished.
                // No point in continuing to render
                if (ctx.res && ctx.res.finished) {
                    return pageProps;
                }

                // Only if ssr is enabled
                if (ssr) {
                    try {
                        // Run all GraphQL queries
                        const { getDataFromTree } = await import("@apollo/react-ssr");
                        await getDataFromTree(
                            <AppTree
                                pageProps={{
                                    ...pageProps,
                                    apolloClient,
                                }}
                            />
                        );
                    } catch (error) {
                        // Prevent Apollo Client GraphQL errors from crashing SSR.
                        // Handle them in components via the data.error prop:
                        // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
                        console.error("Error while running `getDataFromTree`", error);
                    }

                    // getDataFromTree does not call componentWillUnmount
                    // head side effect therefore need to be cleared manually
                    Head.rewind();
                }
            }

            // Extract query data from the Apollo store
            const apolloState = apolloClient.cache.extract();

            return {
                ...pageProps,
                apolloState,
            };
        };
    }

    return WithApollo;
}

/**
 * Always creates a new apollo client on the server
 * Creates or reuses apollo client in the browser.
 * @param  {Object} initialState
 */
function initApolloClient(initialState) {
    // Make sure to create a new client for every server-side request so that data
    // isn't shared between connections (which would be bad)
    if (typeof window === "undefined") {
        return createApolloClient(initialState);
    }

    // Reuse client on the client-side
    if (!apolloClient) {
        apolloClient = createApolloClient(initialState);
    }

    return apolloClient;
}

/**
 * Creates and configures the ApolloClient
 * @param  {Object} [initialState={}]
 */
function createApolloClient(initialState = {}) {
    // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
    return new ApolloClient({
        ssrMode: typeof window === "undefined", // Disables forceFetch on the server (so queries are only run once)
        link: new HttpLink({
            uri: "http://localhost:3000/api/graphql", // Server URL (must be absolute)
            credentials: "same-origin", // Additional fetch() options like `credentials` or `headers`
            fetch,
        }),
        cache: new InMemoryCache().restore(initialState),
    });
}

Upvotes: 3

Views: 4706

Answers (2)

Kelvin Mitaki
Kelvin Mitaki

Reputation: 98

I ran into the same problem and the reason that's happening is the way next js handles caching. Delete the .next folder then restart your server, that will solve the issue.

Upvotes: 3

Akumzy
Akumzy

Reputation: 43

Well I spent almost 5 days trying to figure out what I did wrong or if Apollo server is caching the schema on production any to found the Apollo client origin is pointing to the wrong server.

Maybe you should check well as well.

Upvotes: 0

Related Questions