小编J. *_*son的帖子

我有一个在本地运行良好的 Nuxt 应用程序。当我将它部署到 Netlify（yarn generate自动运行的地方）时，我注意到发生了一些奇怪的 CSS 事情。

我有一张带有悬停效果的卡片：

<style lang="scss" scoped>
  .gallery-card {
    align-items: center;
    background: url('/backgrounds/image-1.jpg') no-repeat center center;
    background-size: cover;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 400px;
    justify-content: center;
    position: relative;
    max-width: 100%;

    .overlay {
      background-color: rgba(255, 255, 255, 0.3);
      bottom: 0;
      left: 0;
      opacity: 0%;
      position: absolute;
      right: 0;
      top: 0;
      transition: 0.2s all ease-in-out;
      visibility: hidden;
    }

    .gallery-title {
      color: white;
      text-shadow: 3px 3px rgba(0, 0, 0, 0.25);
      transition: 0.2s all ease-in-out;
    } …

我的 Apollo 缓存中有一个 NuxtJS 应用程序，其中包含深度嵌套的数据。作为一个例子，我的缓存可能看起来像这样，其中旅行有许多类别，其中有许多项目。

ROOT_QUERY
  trips: [Trip]
    0: Trip:1
      categories: [Category]
        0: Category:1
          items: [Item]
            0: Item:1
            1: Item:2
            2: Item:3  
    1: Trip:2

我正在尝试在删除或添加项目到位于 的项目数组中后更新缓存trips[0].categories[0]。我所拥有的功能有效，但只有在与我的服务器通信并返回响应时似乎有 1-2 秒的延迟之后。在我看来，optimisticResponse要么无法正常工作，要么数据嵌套太深，无法足够快地更新 UI。

这是我的removeItem函数的样子：

import { remove } from 'lodash';

async function removeItem ({ fields, trip_id, apollo }) {
  return await apollo.mutate({
    mutation: removeItemMutation,
    variables: fields,
    optimisticResponse: {
      __typename: 'Mutation',
      removeItem: {
        __typename: 'item',
        id: fields.item_id,
        name: '',
        weight: 0,
        unit: '',
        price: 0,
        category_id: fields.category_id,
        quantity: 0, …

我正在使用最新版本的 NextJS 10.0.9。我有一个想要显示的图像，但是收到错误：

Error: Image with src "https://picsum.photos/480/270" must use "width" and "height" properties or "layout='fill'" property.

正如您在这里看到的，我确实设置了所有这些属性：

<div className="card-img">
  <Image
    alt={media?.title}
    title={media?.title}
    src={media?.previewImage || 'https://picsum.photos/480/270'}
    width={480}
    height={270}
    layout="fill"
  />
</div>

由于某种原因，默认的外部图像似乎不想与图像组件很好地配合。有谁知道解决方法或可能出现这种情况的原因？

还有一点旁注：我在属性上遇到了 Typescript 错误layout，提示“类型‘“fill”’不可分配给类型‘“fixed”|“intrinsic”|“responsive”| undefined’。”。我不确定这是否相关？

我正在尝试实现 Facebook、Google 和 Twitter 身份验证。到目前为止，我已经在各自的开发者平台中设置了应用程序，将这些密钥/秘密添加到我的 Supabase 控制台，并创建了此 graphql 解析器：

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import camelcaseKeys from 'camelcase-keys';
import { supabase } from 'lib/supabaseClient';
import { LoginInput, Provider } from 'generated/types';
import { Provider as SupabaseProvider } from '@supabase/supabase-js';
import Context from '../../context';
import { User } from '@supabase/supabase-js';

export default async function login(
  _: any,
  { input }: { input: LoginInput },
  { res, req }: Context
): Promise<any> {
  const { provider } = input;

  // base level error …

我无法概念化如何处理这个问题。我仔细研究了 Prisma 文档和其他 SO 问题，但它们似乎都与这种情况略有不同。

我有两个模型：

model User {
  id                Int               @id @default(autoincrement())
  firstName         String?           @map("first_name")
  lastName          String?           @map("last_name")
  email             String            @unique
  password          String
  role              UserRole          @default(value: USER)
  image             String?           @map("image")
  createdAt         DateTime          @default(now()) @map("created_at")
  updatedAt         DateTime          @updatedAt @map("updated_at")

  friends       Friend[]

  @@map("users")
}

model Friend {
  id               Int      @id @default(autoincrement())
  inviteSentOn     DateTime @map("invite_sent_on") @db.Timestamptz(1)
  inviteAcceptedOn DateTime @map("invite_accepted_on") @db.Timestamptz(1)
  userId           Int      @map("user_id")
  friendId         Int      @map("friend_id")
  createdAt        DateTime @default(now()) @map("created_at")
  updatedAt        DateTime @updatedAt @map("updated_at")

  user User @relation(fields: [userId], references: [id])
  // friend …

我正在努力使用 Uber 的 React-map-gl 库加载 Mapbox 地图。我已通过 API 提供的 JSON 成功加载了带有自定义标记的地图（如您从第一张图片中看到的）。

不过，如果你看一下休斯顿附近的绿色标记，就会发现由于某种原因它位于墨西哥湾的某个地方。但是，如果我放大该区域......

您可以看到，当我放大时，标记会重新调整到正确的位置。什么会导致这样的事情呢？

import ReactMapGL, { Marker, NavigationControl, Popup } from 'react-map-gl';
import CityInfo from './city-info';
import 'mapbox-gl/dist/mapbox-gl.css';

class ExplorePage extends Component {
    state = {
        viewport: {
            width    : 400,
            height   : 400,
            latitude : 38.789093,
            longitude: -95.295881,
            zoom     : 3.7,
        },
        popupInfo: null,
    };

    componentDidMount() {
        this.props.dispatch(explorepageActions.getFavoriteHikes());
    }

    _renderMarker = (marker, index) => {
        return (
            <Marker
                anchor='bottom'
                key={`marker-${index}`}
                longitude={parseFloat(marker.longitude)}
                latitude={parseFloat(marker.latitude)}
            >
                <Pin width={100} onClick={(event) => this._handleClick(event, marker)} …

我正在处理一个相当新的 Nuxt 项目，但在设置后退按钮时遇到了问题。我什至查看了仍然不想工作的“ vue-router-back-button ”包（我遇到了不相关的错误）。使用我拥有的代码，链接想要导航到用户当前所在的页面，而不是之前的页面。我确实在我的服务器上收到一个错误，说有一个Invalid prop: type check failed for prop "to". Expected String, Object, got Function.，但是我会让后退按钮动态吗？

<template>
  <div class="page-title-wrapper">
    <nuxt-link
      v-if="back"
      :to="to"
      class="back-wrapper">
      <icon
        name="angle-left"
        fill="#9e9e9e"
        height="20px"
        width="20px"
        class="d-flex" />
      <p class="display-1 grey--text">
        Back
      </p>
    </nuxt-link>
    <h1 class="display-3 text-center">
      {{ text }}
    </h1>
  </div>
</template>

<script>
  export default {
    props: {
      back: {
        type: Boolean,
        default: false,
      },
      text: {
        type: String,
        default: 'Page'
      }
    },

    methods: {
      to() {
        this.$router.go(-1);     <---- evaluates to current page?
      }, …