Рекомендуемый способ использования GraphQL в приложении Next. js - PullRequest
Новая
       67

Рекомендуемый способ использования GraphQL в приложении Next. js

5 голосов
/ 25 марта 2020

В своих приложениях я использую следующие NPM модули для игры с Страпой , GraphQL и Далее. js:

На следующем шаге я создаю файл конфигурации Apollo, пример ниже: 

import { HttpLink } from "apollo-link-http";
import { withData } from "next-apollo";

const config = {
  link: new HttpLink({
    uri: "http://localhost:1337/graphql",
  })
};
export default withData(config);

, а затем внутри компонента класса я использую метод c stati getInitialProps() для извлечения данных из Strapi через запрос GraphQL.

Все хорошо, но, возможно, есть другой лучше через React хуки или любые другие?

Ответы [ 2 ]

2 голосов
/ 06 апреля 2020

Я нашел еще одно приятное решение для подключения Next. js и GraphQL.

Я хочу поделиться им с вами. Давайте начнем.

Примечание: Я предполагаю, что у вас уже установлено приложение Next. js. Если нет, пожалуйста, следуйте этому руководству .

. Для построения этого решения нам понадобятся:

1. run npm команда: 

npm install --save @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch next-with-apollo

2. создать Конфигурационный файл Appolo, например. в папке ./config и назовите ее appollo.js. Код файла ниже: 

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import withApollo from "next-with-apollo";
import { createHttpLink } from "apollo-link-http";
import fetch from "isomorphic-unfetch";

const GRAPHQL_URL = process.env.BACKEND_URL || "https://api.graphql.url";

const link = createHttpLink({
  fetch,
  uri: GRAPHQL_URL
});

export default withApollo(
  ({ initialState }) =>
    new ApolloClient({
      link: link,
      cache: new InMemoryCache()
        .restore(initialState || {})
    })
);

3. создать _app.js файл (вид оболочки) в папке ./pages с кодом ниже: 

import React from "react";
import Head from "next/head";
import { ApolloProvider } from "@apollo/react-hooks";
import withData from "../config/apollo";

const App = ({ Component, pageProps, apollo }) => {
  return (
    <ApolloProvider client={apollo}>
      <Head>
        <title>App Title</title>
      </Head>
      <Component {...pageProps} />
    </ApolloProvider>
  )
};

export default withData(App);

4. создать повторно используемый компонент запроса, например. ./components/query.js

import React from "react";  
import { useQuery } from "@apollo/react-hooks";

const Query = ({ children, query, id }) => {  
  const { data, loading, error } = useQuery(query, {
    variables: { id: id }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {JSON.stringify(error)}</p>;
  return children({ data });
};

export default Query;

5. создать компонент для наших данных, полученных с помощью GraphQL 

import React from "react";
import Query from "../components/query";
import GRAPHQL_TEST_QUERY from "../queries/test-query";

const Example = () => {  
  return (
    <div>
      <Query query={GRAPHQL_TEST_QUERY} id={null}>
        {({ data: { graphqlData } }) => {
          return (
            <div>
              {graphqlData.map((fetchedItem, i) => {
                return (
                  <div key={fetchedItem.id}>
                    {fetchedItem.name}
                  </div>
                );
              })}
            </div>
          );
        }}
      </Query>
    </div>
  );
};

export default Example;

6. создайте наш запрос GraphQL внутри ./queries/test-query. Примечание: Я предполагаю, что у нас есть доступ к данным нашего примера и свойствам id и name через GraphQL 

import gql from "graphql-tag";

const GRAPHQL_TEST_QUERY = gql`
  query graphQLData {
    exampleTypeOfData {
      id
      name
    }
  }
`;

export default GRAPHQL_TEST_QUERY;

7. для отображения нашего результата создайте index.js файл (домашнюю страницу) в папке ./pages с кодом ниже: 

import Example from './components/example';

const Index = () => <div><Example /></div>

export default Index;

Вот и все ... наслаждайтесь и расширяйте это решение, как хотите ..

2 голосов
/ 31 марта 2020

Я нашел еще одно интересное решение с использованием apollo-server-micro и loda sh

Краткое руководство:

  1. создать Next. js app (пример имени: next-app ) и установить необходимые пакеты 

    npm i apollo-server-micro lodash

  2. создать необходимые файлы в вас Next. js app ( next-app )

    • / next-app / pages / api / graphql / index. js
    • / next-app / pages / api / graphql / распознаватели. js
    • / next-app / pages / api / graphql / typeDefs. js

  3. добавить код в index. js

    import { ApolloServer } from 'apollo-server-micro';
import resolvers from './resolvers';
import typeDefs from './TypeDef';

const apolloServer = new ApolloServer({
    typeDefs,
    resolvers,
});

export const config = {
    api: {
        bodyParser: false
    }
};

export default apolloServer.createHandler({ path: '/api/graphql' });

  4. добавить код к typeDefs. js

    import { gql } from 'apollo-server-micro';

const typeDefs = gql`
    type User {
        id: Int!
        name: String!
        age: Int
        active: Boolean!
    }
    type Query {
        getUser(id: Int): User
    }
`;

export default typeDefs;

  5. добавить код к распознавателям. js

    import lodash from 'lodash/collection';

const users = [
    { id: 1, name: 'Mario', age: 38, active: true },
    { id: 2, name: 'Luigi', age: 40, active: true},
    { id: 3, name: 'Wario', age: 36, active: false }
];

const resolvers = {
    Query: {
        getUser: (_, { id }) => {
            return lodash.find(users, { id });
        }
    }
};

export default resolvers;

  6. протестируйте приложение Next. js ( next-app ), выполнив команду ниже и проверив URL-адрес graphql http://localhost: 3000 / api / graphql 

    npm run dev
...