Использование `response-apollo-hooks` и` useSubscription` hook - PullRequest
Новая
       32

Использование `response-apollo-hooks` и` useSubscription` hook

2 голосов
/ 25 апреля 2019

Я создаю простое приложение todo, используя React, Apollo и react-apollo-hooks для поддержки хуков, но хук useSubscription не срабатывает.

Я знаю, что настоящий бэкэнд работает, потому что у меня естьПриложение Graphiql настроено, и всякий раз, когда я сохраняю задачу, в графике появляется событие todoCreated.Я также знаю, что настройка websocket работает правильно, потому что запросы и мутации проходят через websocket.Кстати, я использую Elixir, Phoenix, Absinthe для бэкэнда.

Вот компонент Todo-приложения: 

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useQuery, useMutation, useSubscription } from 'react-apollo-hooks';

import styles from 'styles.css';

const TODO_FRAGMENT = gql`
  fragment TodoFields on Todo {
    id
    description
  }
`;

const GET_TODOS = gql`
  {
    todos {
      ...TodoFields
    }
  }
  ${TODO_FRAGMENT}
`;

const SAVE_TODO = gql`
  mutation createTodo($description: String!) {
    createTodo(description: $description) {
      ...TodoFields
    }
  }
  ${TODO_FRAGMENT}
`;

const DELETE_TODO = gql`
  mutation deleteTodo($id: ID!) {
    deleteTodo(id: $id) {
      id
    }
  }
`;

const NEW_TODO_SUBSCRIPTION = gql`
  subscription {
    todoCreated {
      ...TodoFields
    }
  }
  ${TODO_FRAGMENT}
`;

const Todos = () => {
  const [inputValue, setInputValue] = useState('');
  const { data, error, loading } = useQuery(GET_TODOS);

  const saveTodo = useMutation(SAVE_TODO, {
    update: (proxy, mutationResult) => {
      proxy.writeQuery({
        query: GET_TODOS,
        data: { todos: data.todos.concat([mutationResult.data.createTodo]) },
      });
    },
  });

  const deleteTodo = useMutation(DELETE_TODO, {
    update: (proxy, mutationResult) => {
      const id = mutationResult.data.deleteTodo.id
      proxy.writeQuery({
        query: GET_TODOS,
        data: { todos: data.todos.filter(item => item.id !== id) },
      });
    },
  });

  const subData = useSubscription(NEW_TODO_SUBSCRIPTION);
  console.log(subData);

  if (loading) {
    return <div>Loading...</div>;
  };

  if (error) {
    return <div>Error! {error.message}</div>;
  };

  return (
    <>
      <h1>Todos</h1>
      {data.todos.map((item) => (
        <div key={item.id} className={styles.item}>
          <button onClick={() => {
            deleteTodo({
              variables: {
                id: item.id,
              },
            });
          }}>Delete</button>
          {' '}
          {item.description}
        </div>
      ))}
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        type="text"
      />
      <button onClick={() => {
        saveTodo({
          variables: {
            description: inputValue,
          },
        });
        setInputValue('');
      }}>Save</button>
    </>
  );
};

export default Todos;

А вот корневой компонент: 

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks';

import Todos from 'components/Todos';
import apolloClient from 'config/apolloClient';

const App = () => (
  <ApolloHooksProvider client={apolloClient}>
    <Todos />
  </ApolloHooksProvider>
);

export default App;

Кто-нибудь знает, что я делаю неправильно?

1 Ответ

0 голосов
/ 25 апреля 2019

Извините, я понял это, это была глупая ошибка с моей стороны. Проблема, кажется, была с моей настройкой apolloClient: 

import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

import absintheSocketLink from 'config/absintheSocketLink';

const apolloClient = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError }) => {
      if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
          ),
        );
      if (networkError) console.log(`[Network error]: ${networkError}`);
    }),
    split(
      // split based on operation type
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        );
      },
      new HttpLink({
        uri: 'http://localhost:4000/api/graphql',
        credentials: 'same-origin'
      }),
      absintheSocketLink,
    ),
  ]),
  cache: new InMemoryCache()
});

export default apolloClient;

Ошибка в приведенном выше коде заключается в том, что строка 

      absintheSocketLink,

находится не в том месте. Это должно было быть до HttpLink.

Глупый я.

...