'Error: Unable to determine event source based on event. (apollo-server-lambda)

I have this issue after updating to apollo-server-lambda@3^

"Error: Unable to determine event source based on event."

This code used to work a while ago but since the version 3^ of apollo-server-lambda my code is breaking and gives me the error message above....

This is my netlify back-end function code: (graphql.js)

const {
  ApolloServerPluginLandingPageGraphQLPlayground,
  // ApolloServerPluginLandingPageDisabled,
} = require('apollo-server-core');
const faunadb = require('faunadb');

const q = faunadb.query;

const client = new faunadb.Client({ secret: process.env.GATSBY_FAUNADB });

const typeDefs = gql`
  type Query {
    todos: [Todo]!
  }
  type Todo {
    id: ID!
    text: String!
    done: Boolean!
  }
  type Mutation {
    addTodo(text: String!): Todo
    updateTodoDone(id: ID!): Todo
  }
`;

const resolvers = {
  Query: {
    todos: async (parents, args, { user }) => {
      if (!user) {
        return [];
      }
      const results = await client.query(
        q.Paginate(q.Match(q.Index('todos_by_user'), user)),
      );
      return results.data.map(([ref, text, done]) => ({
        id: ref.id,
        text,
        done,
      }));
    },
  },

  Mutation: {
    addTodo: async (_, { text }, { user }) => {
      if (!user) {
        throw new Error('voer ieks goeds in man');
      }
      const results = await client.query(
        q.Create(q.Collection('todos'), {
          data: { text, done: false, owner: user },
        }),
      );

      return {
        ...results.data,
        id: results.ref.id,
      };
    },

    updateTodoDone: async (_, { id }, { user }) => {
      if (!user) {
        throw new Error('voer ieks goeds in man ali boalowii');
      }
      const results = await client.query(
        q.Update(q.Ref(q.Collection('todos'), id), { data: { done: true } }),
      );
      return {
        ...results.data,
        id: results.ref.id,
      };
    },
  },
};

console.log('CLIENT grapqhl #mnfx', client);

// const apolloHandler = server.createHandler();

exports.handler = async (event, context) => {
  try {
    const server = new ApolloServer({
      typeDefs,
      resolvers,

      context: async () => {
        // console.log('ff checken event', event);
        console.log('ff checken context', context);

        if (context.clientContext.user) {
          return {
            event,
            context,
            user: context.clientContext.user.sub,
          };
        }
        return {};
      },

      // playground
      playground: [ApolloServerPluginLandingPageGraphQLPlayground()],
      introspection: true,
    });

    const apolloHandler = server.createHandler({
      expressGetMiddlewareOptions: {
        cors: {
          origin: '*',
          credentials: true,
        },
      },
    });

    console.log('before event ish:', event);
    console.log('before context ish:', context);

    return await apolloHandler(event, context);
  } catch (err) {
    return console.error('Failed ISH!', err);
  }
};

This is the wrapper file: (gatsby-browser.js)

/* eslint-disable prettier/prettier */
/* eslint-disable react/jsx-props-no-spreading */
const React = require('react');

const {
  ApolloProvider,
  ApolloClient,
  HttpLink,
  InMemoryCache,
} = require('@apollo/client');

require('bootstrap/dist/css/bootstrap.min.css');

const netlifyIdentity = require('netlify-identity-widget');

const { setContext } = require('@apollo/client/link/context');

// const fetch = require('isomorphic-fetch');
const fetch = require('cross-fetch');
// const fetch = require('node-fetch');

const { IdentityProvider } = require('./src/context/identity-context');

const Layout = require('./src/components/layout').default;

const authLink = setContext((_, { headers }) => {
  const user = netlifyIdentity.currentUser();
  const token = user.token.access_token;

  console.log('HEADERS @ gatsby-browser #mnfx:', headers);
  console.log('USER @ gatsby-browser #mnfx:', user);
  console.log('TOKEN @ gatsby-browser  #mnfx:', token);

  return {
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${token}` : '',
    },
  };
});

const httpLink = new HttpLink({
  fetch,
  uri: 'https://afrodiasphere.netlify.app/.netlify/functions/graphql',
});

const client = new ApolloClient({
  ssrMode: true,
  cache: new InMemoryCache(),
  link: authLink.concat(httpLink),
});

const wrapPageElement = ({ element, props }) => (
  <Layout {...props}>{element}</Layout>
);

exports.wrapPageElement = wrapPageElement;

const wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>
    <IdentityProvider>{element}</IdentityProvider>
  </ApolloProvider>
);

exports.wrapRootElement = wrapRootElement;

// export const onPreRouteUpdate = ({ location, prevLocation }) => {
//   console.log('new pathname', location.pathname);
//   console.log('old pathname', prevLocation ? prevLocation.pathname : null);
// };

And to make it complete, also the front-end page: (dashboard.tsx)

import React, { useContext, useRef } from 'react';

import { gql, useMutation, useQuery } from '@apollo/client';
import { Button, Form, ListGroup, InputGroup } from 'react-bootstrap';

import IdentityContext from '../context/identity-context';

// interface Props {}

const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
    }
  }
`;

const UPDATE_TODO_DONE = gql`
  mutation UpdateTodoDone($id: ID!) {
    updateTodoDone(id: $id) {
      text
      done
    }
  }
`;

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      text
      done
    }
  }
`;

const Dashboard = () => {
  const { user, identity: netlifyIdentity } = useContext(IdentityContext);

  const inputRef = useRef();

  const [addTodo] = useMutation(ADD_TODO);
  const [updateTodoDone] = useMutation(UPDATE_TODO_DONE);
  const { loading, error, data, refetch } = useQuery(GET_TODOS);

  console.log(data);
  // console.log('displatch! :', dispatch, 'data! :', data);

  return (
    <div>
      <span>Hallo {user && user.user_metadata.full_name}, welkom!</span>

      {user && (
        <Button
          variant="outline-danger"
          type="button"
          className="px-4 mx-4"
          onClick={() => {
            netlifyIdentity.logout();
          }}
        >
          Log out {user.user_metadata.full_name}
        </Button>
      )}

      <div className="container my-5">
        <Form
          onSubmit={async (e) => {
            e.preventDefault();
            await addTodo({ variables: { text: inputRef.current.value } });
            inputRef.current.value = '';
            await refetch();
          }}
        >
          <Form.Group className="d-flex justify-content-between">
            <Form.Label htmlFor="add-die-todo">Add een todo </Form.Label>
            <Form.Control type="text" placeholder="Enter text" ref={inputRef} />
            <Button type="submit" className="mb-2">
              Submit
            </Button>
          </Form.Group>

          <div className="container mt-5 ">
            {loading ? <div>loading...</div> : null}
            {error ? <div>{error.message}</div> : null}
            {!loading && !error && (
              <ListGroup as="ul">
                {data.todos.map((todo) => (
                  <ListGroup.Item
                    eventKey={todo.id}
                    key={todo.id}
                    as="li"
                    className="d-flex justify-content-evenly"
                    onClick={async () => {
                      await updateTodoDone({ variables: { id: todo.id } });
                      await refetch();
                    }}
                  >
                    <InputGroup.Checkbox
                      aria-label="Checkbox for following text input"
                      checked={todo.done}
                    />
                    <span>{todo.text}</span>
                  </ListGroup.Item>
                ))}
                {console.log('DATA van dashboard #mnfx:', data)}
              </ListGroup>
            )}
          </div>
        </Form>
      </div>
    </div>
  );
};

export default Dashboard;

I think this must do it... Help is greatly wanted. Thanks in advance!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source