0

私は React で GraphQL を使用するのが初めてで、プロジェクトを REST API から新しい GraphQL に移行しています。その一環として、完成した GQL API とは関係なく、アプリケーションで動作するようにモック データをセットアップしたいと考えました。私は Apollo とGraphQL Tools のドキュメントに従おうと多くの時間を費やしましたが、何があっても、モック リゾルバーを適切に動作させることができないようです。コンテキストとして、私はこれを NextJS/React アプリで使用しています。ここに、私がやろうとしていることの最小限の例を示します。

App.js のセットアップ

import React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { SchemaLink } from 'apollo-link-schema';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema } from '@graphql-tools/mock';

export default function App() {
    const schema = makeExecutableSchema({typeDefs:`
        type Query {
            getPerson: Person!
        }
                
        type Person {
            name: String!
        }
    `});

    const mocks = {
        Query: () => ({
            getPerson: () => ({
                name: () => "Name"
            })
        })
    }

    addMocksToSchema({ mocks, schema });
    const link = new SchemaLink({ schema });
    const client = new ApolloClient({
        link,
        cache: new InMemoryCache(),
        connectToDevTools: true
    });

    return (
        <ApolloProvider client={client}>
            <Person />
        </ApolloProvider>
    )
}

Person.js

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

export default function Person() {
    const { loading, error, data } = useQuery(gql`
        query PersonQuery {
            getPerson {
                name
            }
        }
    `, {
        errorPolicy: 'all'
    });

    console.log(data);

    if (loading) return "Loading...";
    if (error) console.log(error);

    return (
        <h1>{data.getPerson.name}<h1>
    )
}

console.log(error) の結果を見ると、エラーが発生Cannot return null for non-nullable field Query.getPersonし、それを null 許容フィールドにすると{ getPerson: null }、もちろん返されます。リゾルバーの結果をオブジェクトと関数として返そうとしました。リゾルバー内のログは、クエリ部分が実行されていることを示していますが、その中に何もネストされていません。

何かを間違って設定していますか？また、graphql-tools ドキュメントに基づいて可能であると提案されているように、カスタム モックを渡さないようにしましたが、役に立ちませんでした。また、フックの最新バージョンが addMocksToSchema の使用法を壊したという apollo hooks GitHub からこの問題を見たので、提案された 3.1.3 バージョンを使用してみましたが、やはりうまくいきませんでした。どんな助けでも大歓迎です！

4

1 に答える 1

1

プレーンなスキーマではなく、モックをクライアントに提供する必要があります。

const schemaWithMocks = addMocksToSchema({
  schema,
  mocks: {},
  preserveResolvers: false,
});

const client = new ApolloClient({
  // link: new SchemaLink({ schema }); < -- REPLACE THIS
  link: (new SchemaLink({ schema: schemaWithMocks }) as unknown) as ApolloLink, // https://github.com/apollographql/apollo-link/issues/1258
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

console.log(data)印刷するようになりまし た{"getPerson": {"__typename": "Person", "name": "Name"}}

于 2020-11-27T14:08:15.163 に答える