In example react-graphql TypeError: Object(...) is not a function

[iamalvisng]

I was trying to follow the tutorial for the authentication at https://www.graph.cool/docs/tutorials/auth/authentication-with-facebook-for-react-and-apollo-yi9jeuwohl#getting-started.

Unfortunately, I am stuck in the step 18, where I see the error as such:

Has anyone bumped into this error and managed to resolve it?

This is my App.js:

/*global FB*/

import React from 'react';
import { withRouter } from 'react-router';
import ListPage from './ListPage';
import NewPostLink from './NewPostLink';
import { gql, graphql } from 'react-apollo';

const FACEBOOK_APP_ID = '__MY_APP_ID__';
const FACEBOOK_API_VERSION = 'v2.10';

class App extends React.Component {
    componentDidMount() {
        this._initializeFacebookSDK();
    }

    _initializeFacebookSDK() {
        window.fbAsyncInit = function() {
            FB.init({
                appId: FACEBOOK_APP_ID,
                cookie: true, // enable cookies to allow the server to access the session
                version: FACEBOOK_API_VERSION, // use Facebook API version 2.10
            });
        };

        // Load the SDK asynchronously
        (function(d, s, id) {
            var js,
                fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = '//connect.facebook.net/en_US/sdk.js';
            fjs.parentNode.insertBefore(js, fjs);
        })(document, 'script', 'facebook-jssdk');
    }

    _handleFBLogin = () => {
        FB.login(
            response => {
                console.log(response);
                this._facebookCallback(response);
            },
            { scope: 'public_profile,email' }
        );
    };

    _facebookCallback = async facebookResponse => {
        if (facebookResponse.status === 'connected') {
            const facebookToken = facebookResponse.authResponse.accessToken;
            const graphcoolResponse = await this.props.authenticateUserMutation(
                { variables: { facebookToken } }
            );
            const graphcoolToken =
                graphcoolResponse.data.authenticateUser.token;
            localStorage.setItem('graphcoolToken', graphcoolToken);
            window.location.reload();
        } else {
            console.warn(`User did not authorize the Facebook application.`);
        }
    };

    _isLoggedIn = () => {
        return false;
    };

    _logout = () => {
        localStorage.removeItem('graphcoolToken');
        window.location.reload();
    };

    render() {
        if (this._isLoggedIn()) {
            return this.renderLoggedIn();
        } else {
            return this.renderLoggedOut();
        }
    }

    renderLoggedIn() {
        return (
            <div>
                <span>Logged in as ${this.props.data.loggedInUser.id}</span>
                <div className="pv3">
                    <span
                        className="dib bg-red white pa3 pointer dim"
                        onClick={this._logout}
                    >
                        Logout
                    </span>
                </div>
                <ListPage />
                <NewPostLink />
            </div>
        );
    }

    renderLoggedOut() {
        return (
            <div>
                <div className="pv3">
                    <div>
                        <span
                            onClick={this._handleFBLogin}
                            className="dib pa3 white bg-blue dim pointer"
                        >
                            Log in with Facebook
                        </span>
                    </div>
                    <span>Log in to create new posts</span>
                </div>
                <ListPage />
            </div>
        );
    }
}

const AUTHENTICATE_FACEBOOK_USER = gql`
    mutation AuthenticateUserMutation($facebookToken: String!) {
        authenticateUser(facebookToken: $facebookToken) {
            token
        }
    }
`;

export default graphql(AUTHENTICATE_FACEBOOK_USER, {
    name: 'authenticateUserMutation',
})(withRouter(App));

[luienvar-zz]

check your version of react-apollo, if it is the version 2 you need to change the code, check the migrations of this new version, or just install the react-apollo 1.4 version

[iamclaytonray]

You need to:

import gql from 'graphql-tag';

[marktani]

This issue is outdated. Please open a new issue if you have any problems or questions.

[kanlanc]

I am getting the same error even when I am importing it from graphql-tag.

import { gql } from "graphql-tag";

const projectsQuery=gql { projects { id name description image contributors { name } resources { title url } } } export {projectsQuery};

The error is

[iamclaytonray]

@highskillzz - import gql from 'graphql-tag';

graphql-tag doesn't have a named export. They have a default export.

After you replace the import, if you don't get a new error or it's still not working, try restarting webpack. After that, if you still have an issue, shoot a code block on here with your whole file and a code block with the complete error + stack trace. (Not a screenshot.)

[kanlanc]

Yeah, that solved it. Thanks @iamclaytonray