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}porelement={<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!
