Soluções para playlist de GraphQL

Boas pessoal! A continuação um registro de soluções a problemas que encontrei durante a playlist de GrpahQL.

Dicas:
Github do projeto: https://github.com/VitorLuizC/dev-demands/
Se usa VSCode instale a extensão GraphQL

Numero: 1
Problema: Erro com o comando pnpm:
Solução: Colocar o –filter antes dos outros parâmetros

Exemplo: pnpm --filter @dev-demands/server run start
Referencia: https://pnpm.io/pt/filtering

Numero: 2
Problema: [web] Diferençãs entre react-router-dom v5 e v6.
Solução: Os mesmos já vistos nas playlist de react, resumidamente:

  • Trocar Switch por Routes
  • Trocar component={Componente} por element={<Componente />}
  • O path de Route não mais aceita arrays so uma string, ou seja é um path por Route

Exemplo: o arquivo Routes.js ficaria assim depois das modificações:

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import SignIn from './pages/SignIn';

export default function Router() {
    return (
        <Routes>
            <Route exact path="" element={<Home />} />
            <Route exact path="/" element={<Home />} />
            <Route exact path="/sign-in" element={<SignIn />} />
        </Routes>
    );
};

Numero: 3
Problema: [server] Erro de graphql ao instalar apollo-server-express
Solução: instalar o pacote graphql junto ou depois de instalar o apollo-server-express

Exemplo: pnpm --filter @dev-demands/server i apollo-server-express graphql

Numero: 4
Problema: [server] erro de server.start() ao iniciar o server com o comando pnpm --filter @dev-demands/server run start
Solução: server.start() retorna uma Promise então o middleware tem que esperar essa promise ser resolvida, pode iniciar o server dentro de uma função asincrona ou usar then() pra configurar o middleware.

Exemplo:

const app = express();

async function startServer() {
    const server = new ApolloServer({
        typeDefs,
        resolvers,
    });

    await server.start();

    server.applyMiddleware({
        app,
        cors: {
            origin: `http://${HOSTNAME}:3000`
        },
        bodyParserConfig: true,
    });
};

startServer();
app.listen(PORT, HOSTNAME, () => {
    console.log(`Server listening at ${HOSTNAME}:${PORT}`);
});

Numero: 5
Problema: O playground (o endpoint /graphql no server) vem desativado por padrão na versão 3 agora apresenta uma landing page que redireaciona ao Apollo Sandbox.
Solução: Reativar o playground instalando o apollo-server-core (pnpm --filter @dev-demands/server i apollo-server-core) e configurar o server.
Exemplo:

O import:

import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core';

O new ApolloServer:

const server = new ApolloServer({
        plugins: [
            ApolloServerPluginLandingPageGraphQLPlayground(),
        ],
        typeDefs,
        resolvers,
    });

Numero: 6
Problema: Erro com implements Node ou NodeDefs na aula 17
Solução: Está nesse topico no comentario de @fernando.vargas https://community.vtex.com/t/sobre-as-aulas-de-graphql-possivel-erro/32018/7.

Aula: 18
Nota: O professor utiliza a função substr pra implementação dos filtros, a função esta descontinuada e se mantém por compatibilidade, ainda assim funciona. O VSCode mostra ela riscada.

Numero: 7
Aulas: 21 e 22
Problema: Pacotes desatualizados
Descripção: Os pacotes apollo-link apollo-link-context apollo-link-error apollo-link-http estão descontinuados.
Solução: Instale o pacote @apollo/client e graphql com pnpm --filter @dev-demands/web i @apollo/client graphql ao invés dos pacotes apollo-link*

Notas:

Essa instalação foi uma escolha que fiz não porque os pacotes que indica o professor não funcionassem mas porque pnpm reclamou de falta de algumas dependências ao instalar, somando que os pacotes estão descontinuados faz uns anos então optei por instalar o @apollo/client que está ativamente mantido pela equipe de Apollo. No final a escolha se mostrou certa (ver
Soluções para playlist de GraphQL - #51 by fernando.vargas)

pnpm reclamou também da ausência de algumas dependências, eu não instalei elas e até agora funcionou tudo bem.

No arquivo link.js substituir os imports:

import { ApolloLink, Observable } from 'apollo-link';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { onError } from 'apollo-link-error';

por estes:

import { ApolloLink, Observable, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { onError } from '@apollo/client/link/error';

Numero: 8
Aula: 23
Problema: Pacotes desatualizados
Solução: Se ainda não instalou instale @apollo/client, não precisa instalar os pacotes apollo-client, graphql-tag, react-apollo nem apollo-cache-inmemory

Nota

por esse:

import { ApolloClient, InMemoryCache } from '@apollo/client';

Numero: 9
Aula: 24
Problema: Imports
Solução: Instalado o @apollo/client nas aulas anteriores, fazer os imports restantes de lá.

por esse:

import { gql, useQuery } from '@apollo/client';

Numero: 10
Aula: 25
Problema: Import
Solução: Instalado o @apollo/client nas aulas anteriores, fazer os imports de lá.

No arquivo ClientEdit.js (packages/web/src/components) substituir os imports:

import { useQuery, useMutation } from 'react-apollo';
import gql from 'graphql-tag';

por esse:

import { useQuery, useMutation, gql } from '@apollo/client';

That’s all folks!

104 Likes

Nem todo herói usa capa

15 Likes

Muitooo obrigada!!! Estava tendo erro na execução do script e esse post me ajudou demais!

6 Likes

Você é o cara!

6 Likes

Boa, obrigado por compartilhar!

5 Likes

Boa tarde.
Alguém encontrou este erro ao executar pnpm --filter @dev-demands/server run dev

→ Error: Cannot find module ‘graphql’

7 Likes

Sim, é só instalar o graphql pnpm --filter @dev-demands/server i graphql

6 Likes

Salvou demais em!

5 Likes

Olá estou com problema no cors o que poderá ser

4 Likes

Muito Topp, salvou geral!! Muito obrigada!! :grin: :wink:

5 Likes

obrigada!!! S2 eu já pensava em querer chorar rsrs.

5 Likes

@JMT Obrigada! :slight_smile:

5 Likes

Excelente. Ajudou bastante.

5 Likes

@Danilosilva Da pra subir o projeto no github pra dar uma olhada?

4 Likes

Na aula 17 também está dando erro, porque teve um “corte” entre as aulas 16 e 17 que deixou faltando a explicação de como criar e configurar um arquivo Node.js dentro da pasta packages/server/src/graphql/Node

Acabei de publicar o passo a passo da solução neste outro tópico

8 Likes

Obrigado! Consegui resolver o seguinte usando suas dicas:
Problema: Não renderiza o componente Home após terminar as instruções para criar o app React na aula 9 (7:33 min).
Solução: comentar a tag BrowserRouter
Alerta: na aula de react esta tag não causou problema.

export default function Router() {
    return (
        // <BrowserRouter>
            <Routes>
                <Route exact path='/'  element={ <Home/> }/>    
                <Route path='/sign-in' element={ <Signin/> }/>    
            </Routes>
        // </BrowserRouter>
    )

}
7 Likes

Queria contribuir com o seguinte erro que identifiquei no meu código:
O arquivo Home.js acusava erro porque a tag de input estava sem a barra de fechamento:
Problema:

<input 
    id="email" 
    name="email " 
    type="email" 
    inputmode="email" 
    autocomplete="username"                 
> 

Solução

<input 
    id="email" 
    name="email " 
    type="email" 
    inputmode="email" 
    autocomplete="username"                 
/> 
6 Likes

Wow, salvou de novo. Agora na aula sobre Apollo Server! :pray:

5 Likes

Bom dia @AlbertoVictorRebello , se você fizer a importação do BrowserRouter corretamente, não haverá problema algum na execução do programa:

import { BrowserRouter } from "react-router-dom";

5 Likes

@JMT tudo bem? Vejo que tem proficiência em GraphQl.

No momento me encontro meio travado em relação a conteúdo backend, API etc.

Tem alguma dica de como aprender isso na prática e sozinho? Sem depender de videoaulas e usando Problem Based Learning?

Desde já, agradeço!

6 Likes