1

私は GraphQl を初めて使用し、GraphQL NodeJS バックエンド チュートリアル ( GraphQL Realtime Subscriptions )に従いました。すべてがうまくいき、チュートリアルを完了しました。次に、VueJS with Apollo フロントエンド チュートリアル ( Vue & Apollo Subscriptions ) に従いました。フロントエンドのチュートリアルで使用されている GraphCool を使用する代わりに、最初のチュートリアルで作成した独自の GraphQL サーバーを使用することにしました。これは私が立ち往生している部分です。私が電話したら

subscription {
    Link(filter: {
      mutation_in: [CREATED]
    }) {
      node {
        id
        url
        description
      }
    }
}

GraphiQL クライアントでは を取得しid、データを使用して別のブラウザー タブで新しいリンクを作成すると url(このサブスクリプション呼び出しはバックエンド チュートリアルでも行われます)。でも電話したらdescriptiondata: Link: node: {id: "59ef0bbeef32bb05692ee4b4", url: "http://new-test-url2.com", description: "Test description2"}

subscription {
    Link(filter: {
      mutation_in: [CREATED]
    }) {
      node {
        id
        url
        description
        postedBy {
          id
          name
        }
        votes {
          id
          user {
             id
          }
        }
      }
    }
  }

エラーが発生します：

{message: "Cannot destructure property `Users` of 'undefined' or 'null'.",…}
{message: "Cannot destructure property `Votes` of 'undefined' or 'null'.",…}

データでdata:{Link: {node: null}}

私はこの問題の答えを見つけることができません。うまくいけば、誰かがこれを助けてくれます。これは私のコードです:

スキーマ/index.js

type Link {
    id: ID!
    url: String!
    description: String!
    postedBy: User
    votes: [Vote!]!
}

type User {
    id: ID!
    name: String!
    email: String!
    password: String!
    votes: [Vote!]!
}

type Vote {
    id: ID!
    user: User!
    link: Link!
}

type SigninPayload {
    token: String
    user: User
}

type Query {
    allLinks(filter: LinkFilter, skip: Int, first: Int): [Link!]!
}

type Mutation {
    createLink(url: String!, description: String!): Link

    createVote(linkId: ID!): Vote

    createUser(name: String!, email: String!, password: String!): User

    signinUser(email: String!, password: String!): SigninPayload!
}

type Subscription {
    Link(filter: LinkSubscriptionFilter): LinkSubscriptionPayload
    Vote(filter: VoteSubscriptionFilter): VoteSubscriptionPayload
}

input LinkSubscriptionFilter {
    mutation_in: [_ModelMutationType!]
}

input VoteSubscriptionFilter {
    mutation_in: [_ModelMutationType!]
}

type LinkSubscriptionPayload {
    mutation: _ModelMutationType!
    node: Link
}

type VoteSubscriptionPayload {
    mutation: _ModelMutationType!
    node: Vote
}

input LinkFilter {
    OR: [LinkFilter!]
    description_contains: String
    url_contains: String
}

enum _ModelMutationType {
    CREATED
    UPDATED
    DELETED
}

スキーマ/resolvers.js:

Query: {
    allLinks: async (root, {filter, first, skip}, {mongo: {Links, Users}}) => {
        let query = filter ? {$or: buildFilters(filter)} : {};
        const cursor = Links.find(query);
        if (first) {
            cursor.limit(first);
        }

        if (skip) {
            cursor.skip(skip);
        }

        return cursor.toArray();
    },
},

Mutation: {
    createLink: async (root, data, {mongo: {Links}, user}) => {

        assertValidLink(data);
        const newLink = Object.assign({postedById: user && user._id}, data);
        const response = await Links.insert(newLink);

        newLink.id = response.insertedIds[0];

        pubsub.publish('Link', {Link: {mutation: 'CREATED', node: newLink}});

        return newLink;
    },

    createUser: async (root, data, {mongo: {Users}}) => {
        const newUser = {
            name: data.name,
            email: data.email,
            password: data.password,
        };

        const response = await Users.insert(newUser);

        return Object.assign({id: response.insertedIds[0]}, newUser);
    },

    createVote: async (root, data, {mongo: {Votes}, user}) => {
        const newVote = {
            userId: user && user._id,
            linkId: new ObjectID(data.linkId),
        };

        const response = await Votes.insert(newVote);

        return Object.assign({id: response.insertedIds[0]}, newVote);
    },

    signinUser: async (root, data, {mongo: {Users}}) => {
        const user = await Users.findOne({email: data.email});
        if (data.password === user.password) {
            return { token: `token-${user.email}`, user };
        }
    },
},

Subscription: {
    Link: {
        subscribe: () => pubsub.asyncIterator('Link'),
    },
},

Link: {
    id: root => root._id || root.id,

    // postedBy: async ({postedById}, data, {dataloaders: {userLoader}}) => {
    //     return await userLoader.load(postedById);
    // },

    postedBy: async ({postedById}, data, {mongo: {Users}}) => {
        return await Users.findOne({_id: postedById});
    },

    votes: async ({_id}, data, {mongo: {Votes}}) => {
        return await Votes.find({linkId: _id}).toArray();
    },
},
4

1 に答える 1

2

長い間これを解決できたことを願って、私は今日自分でこれを見つけました。ここでの問題は、サブスクリプション サーバーがコンテキスト (つまり、データローダー/ユーザー情報) で渡されなかったことです。

このレッスン ( https://www.howtographql.com/graphql-js/4-connectors/ ) では、Express サーバーのコンテキストをセットアップしましたが、サブスクリプション サーバーには追加されませんでした。

  const buildOptions = async (req,res) => {                                                     
const user = await authenticate(req, mongo.Users)                                           
return {                                                                                    
  context: {                                                                                
    dataloaders: buildDataloaders(mongo),                                                   
    mongo,                                                                                  
    user                                                                                    
  },                                                                                        
  formatError,                                                                              
  schema,                                                                                   
}

これをサブスクリプション サーバーに追加するために、次のオプションを自分で使用しました。

const subscriptionBuildOptions = async (connectionParams,webSocket) => 
{                      
  return {                                                                                   
    dataloaders: buildDataloaders(mongo),                                                    
    mongo,                                                                                   
  }
}

次に、onConnect パラメータを追加するだけで、これを SubscriptionServer に追加しました。

const server = createServer(app);                                                             
server.listen(PORT, () => {                                                                   
  SubscriptionServer.create(                                                                  
    {execute, subscribe, schema, onConnect: subscriptionBuildOptions},                        
    {server, path: '/subscriptions'},                                                         
  );                                                                                          
  console.log(`Hackernews GraphQL server running on port ${PORT}.`)                           
});

そして、それはほとんどすべてが機能するはずです。私は個人的にreactjsチュートリアルを行っているので、個々の問題が何であるかはわかりませんが、reactjsチュートリアルのAPI呼び出しは全体的に少し同期していませんでした.

于 2017-12-04T01:30:32.267 に答える