Вложенная выборка, вторая неудача - React & GraphQL - PullRequest
Новая
       17

Вложенная выборка, вторая неудача - React & GraphQL

0 голосов
/ 09 января 2019

Вот как работает мое приложение: я извлекаю твиты из API и записываю их локально в файл json на сервере Apollo. Затем я хочу получить эти твиты с сервера Apollo, используя GraphQL. К сожалению, кажется, что я не могу связать fetch и refetch (из запроса Apollo GraphQL). Когда я запускаю приведенный ниже код, я всегда получаю ошибку Failed to load resource: Could not connect to the server. (когда я обновляюсь после ошибки, данные правильные). Однако, если в моей форме я запрашиваю только первый API, подождите несколько секунд и нажмите кнопку, подобную этой <button onClick={() => refetch()}>Refetch!</button>, тогда она будет работать.

Вот код: 

let data = <Query
query={gql`
            {
                twitQueries {
                    id
                    text
                    username
                    retweets
                    likes
                }
            }
        `}
        >
        { ({ loading, error, data, refetch }) => {
            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error</p>;

            const tweets = <div> my tweets </div>;

            return  <div id='formAndTweets'>
                        <button onClick={() => refetch()}>Refetch!</button>
                        <form onSubmit={(e) => {
                            e.preventDefault();
                            const username = this.state.username;
                            const controller = new AbortController();
                            const signal = controller.signal

                            fetch('http://localhost:5000/user/'+username+'/max/10', {
                                method: 'GET', signal: signal
                            }).then((res) => {
                                return res.json().then((data) => {
                                    this.setState({request: 'done'});
                                    return refetch();
                                });
                            }); 
                        }}>
                            <label htmlFor="username">Username: </label>
                            <input id="username" name="username" type="text" value={this.state.username} onChange={(e) => { this.setState({username: e.target.value}); }}/>

                            <input type="submit" value="Search" />
                        </form>
                        {tweets}
                    </div>
        }}
        </Query>

Почему я не могу сделать что-то вроде fetch(...).then(() => { refetch() }) и как решить эту проблему без необходимости ждать и нажимать другую кнопку?

Вот скриншот сетевой консоли: https://gyazo.com/9903ad667d6ce4d7ab7c0a83e8f6e426

ОБНОВЛЕНИЕ: Работает с общедоступным сервером Apollo. Так что, должно быть, что-то происходит с моим, но я не могу найти что. Вот код:

index.js: 

import express from 'express';
import bodyParser from 'body-parser';
import { graphqlExpress, graphiqlExpress } from 'apollo-server-express';
import { makeExecutableSchema } from 'graphql-tools';
import path from 'path'
import fs from 'fs'
import cors from 'cors'
import resolvers from './resolvers'

const typeDefs = fs.readFileSync(path.join(__dirname, 'model.graphql'),{encoding:'utf-8'})
const myGraphQLSchema = makeExecutableSchema({typeDefs, resolvers})

const PORT = 4000;

const app = express();

app.use(cors()); // enable `cors` to set HTTP response header: Access-Control-Allow-Origin: *

// bodyParser is needed just for POST.
app.use('/graphql', bodyParser.json(), graphqlExpress({ 
    schema: myGraphQLSchema,
}));

app.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
  }),
);

app.listen(PORT);

resolver.js: 

var exec = require('child-process-promise').exec;
const util = require('util');
const fs = require('fs');

const readFile = util.promisify(fs.readFile)

//updated by the first API
const testJsonPath = 'tweets.json';

const resolvers = {
    MyQueryType: {
        twitQueries(root,args,context) {
            return readFile(testJsonPath).then(content =>{
                return JSON.parse(content);
            })
        }
    }
}

export default resolvers;

model.graphql 

scalar Date

type TweeterQuery{
    id: String
    username: String
}

type Twit{
    id: ID!
    username: String!
    date: String!
    replies: Int!
    retweets: Int!
    likes: Int!
    geo: String
    mentions: String
    hashtags: String
    permalink: String!
    emoticons: Int!
    emoticonsStr: String
    replying: Int!
    replyingTo: String 
    text: String!
}

type Member{
    id: ID!
    login: String
}

type MyQueryType{
    twitQueries(id: ID):[Twit]
}

schema{
    query: MyQueryType
    #mutation: Mutation
    #subscription: Subscription
}

input TwitInput{
    author:AuthorInput
}

input AuthorInput{
    id:ID
    login:String
}

Это действительно меня утомляет, потому что, как я уже сказал, это действительно работает, когда вы ждете несколько секунд после первого fetch. Я просто не могу понять, откуда проблема на моем сервере.

...