我的前端是localhost:3000,我的GraphQL服务器是localhost:3333.

我已经使用react-apollo在JSX中查询/变异,但还没有从Express中查询/变异.

我想在我的网站上进行查询/变异server.js.

server.get('/auth/github/callback', (req, res) => {
  // send GraphQL mutation to add new user
});

下面似乎是正确的方向,但我得到TypeError: ApolloClient is not a constructor:

const express = require('express');
const next = require('next');
const ApolloClient = require('apollo-boost');
const gql = require('graphql-tag');


// setup
const client = new ApolloClient({
  uri: 'http://localhost:3333/graphql'
});
const app = next({dev});
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    server.get('/auth/github/callback', (req, res) => {
      // …

另一篇文章分享了一个如何取消订阅的例子，而Apollo 文档没有。Apollo 文档确实提到了 subscribeToMore 返回的内容......

subscribeToMore：设置订阅的函数。subscribeToMore返回一个可用于取消订阅的函数。

这确实给出了提示。看一个例子会有所帮助。

问题

@apollo/react-hooks在 a 中使用,useEffect()并返回 的结果，这subscribeToMore是取消订阅组件卸载的方式吗？

const { data, error, loading, subscribeToMore } = useQuery(GET_DATA)

useEffect(() => {
    const unsubscribe = subscribeToMore(/*...*/)
    return () => unsubscribe();
}, [])

使用 VScode，如何修复此错误？

#pragma once in main file [-Wpragma-once-outside-header]

更新： 在 VScode 中显示：

再次更新： 这是我当前的 VScode 设置c_cpp_properties.json

{
  "configurations": [
    {
      "name": "Mac",
      "includePath": ["${workspaceFolder}/**"],
      "defines": [],
      "macFrameworkPath": [
        "/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/System/Library/Frameworks"
      ],
      "compilerPath": "/usr/bin/clang",
      "cStandard": "c11",
      "cppStandard": "c++17",
      "intelliSenseMode": "clang-x64"
    }
  ],
  "version": 4
}

在为这个例子添加样式组件之后,我们注意到当我们只修改了一个状态项时,我们的列表组件会更新所有内容.

添加/删除单个条目时,列表呈现突出显示(来自React dev-tools)过多.删除/添加一个项目,然后突出显示所有项目.

代码示例

• github:https://github.com/chancesmith/reactjs-optimize-list-updates/tree/master/src
• codesandbox:https://codesandbox.io/s/wn45qw44z5

以下是右侧列表组件(CategorizedList.js)的示例

import styled from "styled-components";

const Item = styled.li`
  color: #444;
`;

class CategorizedList extends PureComponent {
  render() {
    return (
      <div>
        {this.props.categories.map(category => (
          <ul>
            <li key={this.props.catStrings[category]}>
              {this.props.catStrings[category]}
            </li>
            <ul>
              {this.props.items.map((item, index) =>
                item.category === category ? (
                  <div key={item.label + index}>
                    <Item>{item.label}</Item>
                  </div>
                ) : null
              )}
            </ul>
          </ul>
        ))}
      </div>
    );
  }
}

偏爱

我更喜欢使用PureComponent,以便shouldComponentUpdate() 自动处理.

题

我们如何才能确保只items重新呈现状态中的修改对象？

我需要创建一个可搜索的列表，其中某些记录的类型为ORGANIZATION或RESOURCE。这种关系是一对多的。因此，一个组织可以拥有许多资源。如何在一个模型下建立这种关系？

使用AWS Amplify GraphQL API ...

像这样？ schema.graphql

enum ListingType {
  ORGANIZATION
  RESOURCE
}
type Listing @model {
  id: ID!
  title: String!
  type: ListingType!
  orginzation: Listing
}

但是，在“突变”中，创建第一个资源时无法引用上级组织：

例子

这是一个jQuery示例,用于在网络上绘制画布以选择多个节点:

• http://jsfiddle.net/kbj54bas/(或Github)

怎么能把它翻译成React？

砂箱

我在这个沙箱中设置react-graph-vis(源代码),并在图表中添加了一个参考:https: //codesandbox.io/s/5m2vv1yo04

尝试

• 使用''上的React.createRef()将eventLisnters添加到Graph/canvas时遇到问题
• 在画布上使用此方法时遇到问题: .getContext("2d")
• 我觉得我不明白如何访问这里提到的react-graph-vis方法

结束目标

• 左键单击+鼠标拖动绘制框选择器
• 在mouseup,选择画布上绘制的框中的节点,并清除绘图

也许我正朝着错误的方向前进.

我想将我的应用程序移动到服务器的根目录。我在用段屏蔽子目录时遇到麻烦。

当前网址： mysite.com/client/kelloggs/sketches/image1.png

当前的htaccess： RewriteRule ^client/([^/]+)/([^/]+)/([^/]+) /client_view/_show_mocks.php?client_name=$1&milestone=$2&image=$3 [NC]

我该如何删除client/却改用这样的URL？ mysite.com/kelloggs/sketches/image1.png

希望： mysite.com/kelloggs/sketches/image1.png

就像在S3-Bucket / Management / Lifecycles中使用前缀一样，我想修剪包含某些单词的旧文件。

我想删除以365天为开头Screenshot或screencast文件名的文件。

例子

• /Screenshot 2017-03-19 10.11.12.png
• folder1/Screenshot 2019-03-01 14.31.55.png
• folder2/sub_folder/project-screencast.mp4

我目前正在测试生命周期前缀是否也适用于文件。

如何创建箭头键菜单列表？

输入eslint init或后我正在寻找类似的东西create-react-app <project>吗？（参见下图）

ESlint

约曼

到处寻找创建CLI的方法，我发现NodeJS是一个可选选项，后面是一些工具：Commander.js，Vorpal和/或create-new-cli。

如果我走的路正确，如何创建CLI箭头键选择菜单？